将 class 分配给列表中的下一项

Question

您好，我有以下 json 呼叫列表：

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

现在我用 ng-repeat 循环此列表，并在 div 中显示 "Name" 的值。一项始终处于活动状态。例如，"InternalID" = 1 的项目此时处于活动状态。列表中的下一个项目，在这个例子中意味着 "InternalID" = 2 的项目，应该变成具有特定样式的 class。当我将 "InternalID" = 2 的项目设置为活动时，列表中的下一个项目将是 "InternalID" = 3 的项目，这应该得到 class具体风格。我这样试过：

    <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>

在我的控制器 (ctrl) 中，我设置并获取了列表的当前值。比起我使用 ng-init 通过比较我的价值和我的项目的 "InternalID" 来获取活动索引。之后，我使用 ng-class 将我的特定 class 赋予列表中的项目，该索引比我的活动索引 + 1，因此它应该是列表中的下一个项目。这工作正常，当第一次打开它时。在我设置一个新的活动项目后，它不会改变。具有特定 class 的第一项不会改变，它始终相同。

这里有什么问题？很难解释，希望能理解。

谢谢

Answer 1

ng-init 只执行一次。为什么不让控制器处理计算并像这样传递模板：

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

并让 ng-repeat 将 class 放在相应的项目上。

每次激活一项时，您都必须更新列表。但这并不难。

Answer 2

我建议将相当多的逻辑移至控制器或范围：

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>

Answer 3

为什么不将其简化为：

$scope.activeId= null;
$scope.setActiveId = function (id) {
   $scope.activeId= id;
};

<div ng-repeat="item in ctrl.list.Items track by $index" 
     ng-click="setActiveId($index)"
     ng-class="{nextItem: $index == activeId + 1}"><div>

将 class 分配给列表中的下一项

Give class to the next item in list

angularjs

ng-class

ng-init