Question

您好我跟随json名为list：

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

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

    <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将我的特殊类赋予列表中的项目，该索引比我的活动索引小+ 1，因此它应该是列表中的下一个项目。当第一次打开时，这很好用。设置新的活动项目后，它不会改变。具有特定类的第一项不会改变，它总是相同的。

这是什么问题？很难解释它，我希望理解它是好的。

由于

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将课程放在相应的项目上。

每次激活一个项目时，您都必须更新列表。但它并不那么难。

Answer 2

我建议将一些逻辑移到控制器或范围：

＆＃13;

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];
    }
  });

＆＃13;

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

＆＃13;

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

＆＃13;

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>

将类提供给列表中的下一个项目

3 个答案: