基于元素在数组中的角度集动态类

时间:2016-04-22 21:20:24

标签: javascript angularjs

我试图根据数组中是否存在对象来设置类。类似的东西:

<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

这个想法是,当点击一个按钮并选择一个项目时,我认为该类将被应用并且颜色应该变为灰色。然而,什么也没发生。没有错误。

3 个答案:

答案 0 :(得分:0)

试试这个:

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

答案 1 :(得分:0)

在这种情况下,您需要使用Array.prototype.findreturn的{​​{1}}值始终为Array.prototype.forEach

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

undefined

答案 2 :(得分:0)

我包含的

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

};