AngularJs Umschaltfunktion für das ausgewählte Element in ng-repeat

Question

Ich habe eine Liste von Elementen, und ich habe aktivieren/deaktivieren Methode als Option für jedes Element in einer Liste.

Ich möchte nur ein Element in einer Liste wechseln:

Die aktuelle Implementierung schaltet alle Elemente in einer Liste und Änderungen Klassensymbole für alle.

HTML

<div class="device" ng-repeat="item in items" ng-class="{'open': item.isOpen}"> 
    <!-- Enable/Disable--> 
    <a href="#" class="m-r-20" ng-click="test.toggleMethod(item.Id)"> 
    <span class="{{test.buttonClassIcon}}" title="{{test.title}}"></span> 
    </a> 
</div> 

-Controller

model.enabled = true; 
model.toggleMethod = function (deviceId) { 

    if (model.enabled) { 
     locationService.start(deviceId).then(deviceList); 
    } else { 
     locationService.stop(deviceId).then(deviceList); 
    } 

    model.enabled = !model.enabled; 
    model.buttonClassIcon = model.enabled ? 'fa fa-bell' : 'fa fa-bell-slash'; 
    model.title = model.enabled ? 'Enable' : 'Disable'; 

}; 

Wenn ich Glocke klicken, ändert es Klasse für alle, und globalen Variable schaltet.

Answer 1

Sie sollten eine enabled Eigenschaft für jedes Element in der Liste haben.

model.items.map(function(item){ 
    item.enabled = false; // or other default value 
}); 

und die in den HTML-Code:

<a href="#" class="m-r-20" ng-click="test.toggleMethod(item)"> 
    <span ng-if="item.enabled" class="fa fa-bell" title="Enable"></span> 
    <span ng-if="!item.enabled" class="fa fa-bell-slash" title="Disable"></span> 
</a> 

oder Sie ng-class oder erstellen Funktionen wie getTitle(item.enabled) verwenden können, die den entsprechenden Titel zurückgibt.

und die toggleMethod:

model.toggleMethod = function (device) { 
    var deviceId = device.Id; 
    if (device.enabled) { 
     locationService.start(deviceId).then(deviceList); 
    } else { 
     locationService.stop(deviceId).then(deviceList); 
    } 

    device.enabled = !device.enabled; 
}; 

Hier ist die fiddle.

Hoffe das ist, was Sie versucht haben zu erreichen.

Answer 2

In Ihrer Funktion aktivieren/deaktivieren Sie nicht das ausgewählte Element, stattdessen aktivieren/deaktivieren Sie ein Modellobjekt. Ich werde eine Annahme machen, entsprechend Ihrem Schnipsel.

Da Sie die Artikel-ID haben, oder Sie können die $ Index (die Position in das Element-Array) passieren Sie tun können:

//also pass $index into ng-click function 
     <a href="#" class="m-r-20" ng-click="test.toggleMethod(item.Id,$index)"> <span class="{{test.buttonClassIcon}}" title="{{test.title}}"></span> </a> 

und in Funktion Körper überprüfen das ausgewählte Element:

model.toggleAlarmMethod = function (deviceId,indx) { 

     if ($scope.items[indx].enabled) { 
      locationService.start(deviceId).then(deviceList); 
     } else { 
      locationService.stop(deviceId).then(deviceList); 
     } 

//enable/disable selected item 
     $scope.items[indx].enabled = !$scope.items[indx].enabled; 
     $scope.items[indx].buttonClassIcon = $scope.items[indx].enabled ? 'fa fa-bell' : 'fa fa-bell-slash'; 
     $scope.items[indx].title = $scope.items[indx].enabled ? 'Enable' : 'Disable'; 

    };