Give class to the next item in list

Hi I've got follow json called list:

{
    "Items" : [
           {
               "InternalID": 1,
               "Name" : "Item 1"
           },
           {
               "InternalID": 2,
               "Name" : "Item 2"
           },
           {
               "InternalID": 3,
               "Name" : "Item 3"
           }
    ]
}

Now I loop this list with a ng-repeat and show the value of "Name" in a div. One item is always active. For example, the item with the "InternalID" = 1 ist at this moment active. The next item in the list, this means in this example the item with the "InternalID" = 2, should become a class with a specifique style. And when I set the item with the "InternalID" = 2 as active, the next item in the list would be the item with the "InternalID" = 3, and this should get the class with the specifique style. I tried it with like this:

    <div class="cRibbonListItem" ng-repeat="item in ctrl.list.Items" ng-init="activeIndex = item.InternalID == ctrl.value.InternalID ? $index : activeIndex" ng-transclude="listItem" ng-if="item.InternalID != ctrl.value.InternalID" ng-class="{cNextItem: $index == activeIndex + 1}">

    </div>

In my controller (ctrl) I've set and get the current value of my list. Than I use the ng-init to get the active index by comparing the "InternalID" of my value and my item. After that, I use the ng-class to give my specifique class to the item in the list, which index is + 1 than my active index, so it should be the next item in the list. This works fine, when a open it the first time. After I set a new active item, it does'nt change. The first item with the specifique class does'nt change, it's always the same.

What is the problem here? It was hard to explain it, I hope it's good to understand.

Thanks

Solution

I suggest moving quite some logic to the controller or scope:

angular.module("demo", [])
  .controller("myctrl", function() {
    var ctrl = this;

    ctrl.list = {
      "Items": [
        { "InternalID": 1, "Name": "Item 1" },
        { "InternalID": 2, "Name": "Item 2" },
        { "InternalID": 3, "Name": "Item 3" }, 
        { "InternalID": 4, "Name": "Item 4" }
      ]
    };
  
    ctrl.activeItem = null;
    ctrl.nextItem = null;
    
    ctrl.selectItem = function(item) {
      ctrl.activeItem = item;
      var idx = ctrl.list.Items.indexOf(item) + 1;
      ctrl.nextItem = (idx < 0 || idx >= ctrl.list.Items.length) ? null : ctrl.list.Items[idx];
    }
  });

div { margin: 10px; padding: 5px; border: 2px solid gray; }
.cNextItem { background: red; }
.cActiveItem { background: green; }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script>

<div ng-app="demo" ng-controller="myctrl as ctrl">
  <div class="cRibbonListItem"
     ng-repeat="item in ctrl.list.Items" 
     ng-class="{cNextItem: item === ctrl.nextItem, cActiveItem: item === ctrl.activeItem}">
    {{ item.InternalID }} => {{ item.Name }} 
    <button ng-click="ctrl.selectItem(item)">select this item</button>
  </div>
</div>