Динамический класс углового набора, основанный на элементе, находящемся в массиве

Question

Динамический класс углового набора, основанный на элементе, находящемся в массиве

0

Я пытаюсь установить класс на основе того, существует или нет объект в массиве. Что-то вроде:

<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

Идея заключается в том, что при нажатии кнопки и выборе элемента я думаю, что класс будет применен, а цвет должен стать серым. Однако ничего не происходит. И никаких ошибок.

1252748 22 апр. 2016, в 23:51

Источник

0

Является ли это потому , что применяется ваш класс selecte вместо selected ?
Nate Anderson 22 апр. 2016, в 21:22
0

@NateAnderson Нет, я только что прошел и убрал кучу таких опечаток.
1252748 22 апр. 2016, в 21:23

Теги:

javascript

angularjs

3 ответа

Ещё вопросы

Является ли это потому , что применяется ваш класс selecte вместо selected ?
@NateAnderson Нет, я только что прошел и убрал кучу таких опечаток.

Nate Anderson · Answer 1 · 2016-04-22T20-36-00.000Z

попробуйте это:

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

SolomonT · Answer 2 · 2016-04-22T20-33-00.000Z

Вот пример скрипта, который я включил, который показывает, как установить 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;
}

};

Leo Irabor Joshua · Answer 3 · 2016-04-22T19-43-00.000Z

В этом случае вам необходимо использовать Array.prototype.find. return значение для Array.prototype.forEach всегда 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;
      });
};