基於數組中元素的角度集動態類

Question

我想基於數組中是否存在對象來設置類。喜歡的東西：

<button ng-repeat="item in items" 
     ng-click="addItem(item)" 
     ng-class="{'selected': selectedFilter(item)}">{{item.name}}</button> 

$scope.items = [ 
    {name: 'apple', prop: 1}, 
    {name: 'banana', prop: 2}, 
    {name: 'orange', prop: 3}  
]; 
$scope.selectedItems = [ 
    {name: 'apple', prop: 1} 
]; 
$scope.addItem = function(item){ 
    $scope.selectedItems.push(item); 
}; 
$scope.selectedFilter = function(item){ 
    $scope.selectedItems.forEach(function(selectedItem){ 
    return selectedItem.name===item.name 
    }); 
}; 

JSBIN

的想法是，當單擊按鈕，一個項目被選中時，我會認爲這個類將被應用，色彩應變成灰色。然而沒有發生。並沒有錯誤。

Answer 1

嘗試了這一點：

<button ng-repeat="item in items" 
     ng-click="addItem(item)" 
     ng-class="{'selected': item.name == selectedItemName }"> 
    {{item.name}} 
</button> 

與此

 $scope.addItem = function (item) { 
      $scope.selectedItems.push(item); 
      $scope.selectedItemName = item.name; 
     }; 

     $scope.selectedItemName = 'apple'; 

你可以擺脫這個功能：

$scope.selectedFilter = function(item){ 
    $scope.selectedItems.forEach(function(selectedItem){ 
    return selectedItem.name===item.name 
}); 

Answer 2

您需要在這種情況下使用Array.prototype.find。 Array.prototype.forEach的return值始終爲undefined。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

$scope.selectedFilter = function(item){ 
    !!$scope.selectedItems.find(function(selectedItem){ 
     return selectedItem.name === item.name; 
     }); 
}; 

Answer 3

Here is a sample fiddle我包括演示瞭如何選擇時設定項的CSS。只是爲了完成它，我還包括一個代碼，當它再次被點擊時，它將從選擇列表中刪除這些項目。

此代碼將$scope.items中的元素初始標記爲IsSelected = true，並且會在點擊發生時更新每個項目的選擇狀態。我對選定的項目使用了綠色（希望你不介意）。

function markSelectedItems() { 
$scope.items.forEach(function(item) { 
    $scope.selectedItems.forEach(function(selectedItem) { 
    return selectedItem.name === item.name ? item.IsSelected = true : false; 
    }); 
}); 

}

$scope.addItem = function(item) { 
if (!item.IsSelected) { 
    $scope.selectedItems.push(item); 
    item.IsSelected = true; 
} else { 
    var indexToRemove = -1; 
    var count = $scope.selectedItems.length; 
    //removes the first match 
    for (var i = 0; i < count; i++) { 
    if ($scope.selectedItems[i].name === item.name) { 
     $scope.selectedItems.splice(indexToRemove, 1); 
     break; 
    } 
    } 
    item.IsSelected = false; 
} 

};