Geben Klasse zum nächsten Eintrag in der Liste

Question

Hallo Ich habe follow json genannt Liste:

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

Jetzt habe ich Schleife diese Liste mit einem ng-repeat und zeigen den Wert der „Name“ in einem div. Ein Element ist immer aktiv. Zum Beispiel ist der Eintrag mit der "InternalID" = 1 in diesem Moment aktiv. Das nächste Element in der Liste, das heißt in diesem Beispiel das Element mit der "InternalID" = 2, sollte eine Klasse mit einem bestimmten Stil werden. Und wenn ich das Element mit der "InternalID" = 2 als aktiv setze, wäre das nächste Element in der Liste das Element mit der "InternalID" = 3, und dies sollte die Klasse mit dem spezifischen Stil erhalten. Ich versuchte es mit so:

<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 meinem Controller (ctrl) Ich habe festgelegt und den aktuellen Wert von meiner Liste bekommen. Dann benutze ich den ng-init, um den aktiven Index zu erhalten, indem ich die "InternalID" meines Wertes und meines Artikels vergleiche. Danach benutze ich die ng-Klasse, um meine specifique Klasse dem Item in der Liste zu geben, welcher Index ist + 1 als mein aktiver Index, also sollte es das nächste Item in der Liste sein. Das klappt gut, wenn man es das erste mal öffnet. Nachdem ich ein neues aktives Item gesetzt habe, ändert es sich nicht. Das erste Element mit der Spezifikationsklasse ändert sich nicht, es ist immer dasselbe.

Was ist das Problem hier? Es war schwer es zu erklären, ich hoffe es ist gut zu verstehen.

Danke

Answer 1

ich ganz gewisse Logik an die Steuerung bzw. -umfang empfehlen bewegen:

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 2

ng-init wird nur einmal ausgeführt. Warum lassen Sie nicht die Steuerung die Berechnung handhaben und die Vorlage so etwas wie dies passieren:

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

Und lassen Sie die ng-Wiederholung nur die Klasse auf das entsprechende Element setzen.

Sie müssen die Liste jedes Mal aktualisieren, wenn Sie ein Element aktivieren. Aber es ist nicht so schwer.

Answer 3

Warum vereinfachen es nicht: für deine Antwort

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