给列表中的下一个项目上课答案

【问题标题】：Give class to the next item in list给列表中的下一个项目上课
【发布时间】：2016-06-02 07:36:12
【问题描述】：

您好，我有一个名为 list 的跟随 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 的项应成为具有特定样式的类。当我将“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，所以它应该是列表中的下一个项目。这很好用，当第一次打开它时。在我设置一个新的活动项目后，它不会改变。具有特定类的第一项不会改变，它总是一样的。

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

谢谢

【问题讨论】：

标签： angularjs ng-class ng-init

【解决方案1】：

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

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>

【讨论】：

【解决方案2】：

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

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

让 ng-repeat 只是把类放在对应的项目上。

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

【讨论】：

嗨，谢谢你的回答，但我搜索了我的解决方案，它不会改变我的 json。问候。

【解决方案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>

【讨论】：