javascript - 如何在取消选择芯片 : AngularJS 时弹出数组的值

Question

我正在使用 Angular Material 芯片实现一个过滤器。当用户单击筹码时，与该筹码关联的值应存储在数组中。同样，当用户取消选择芯片时，该值应该从数组中弹出。

我能够存储这些值，但选择和取消选择会导致在数组中添加重复值，并且当用户取消选择芯片时我无法将它们弹出。

这是我的代码的摘录。

HTML 代码

<div layout="row">
  <md-chips ng-repeat="filter in filters" readOnly="true">
    <md-chip ng-style="{'background': filter.isActive ? 'green' : '' }" class="chipStyling" ng-click="setActiveFilter(filter,$index)">
      {{filter.name}}
    </md-chip>
  </md-chips>
</div>

JS代码

angular.module('BlankApp', ['ngMaterial', 'ngMessages'])
  .controller('ctrl', function($scope) {
    $scope.selectedFilters = []
    $scope.isActive = false;
    $scope.filters = [{
        name: 'Google',
        code: 'g',
        isActive: false
      },
      {
        name: 'Facebook',
        code: 'f',
        isActive: false
      },
      {
        name: 'Twitter',
        code: 't',
        isActive: false
      }
    ]

    $scope.setActiveFilter = function(filter, index) {
      filter.isActive = !filter.isActive;
      if (filter.isActive) {
        $scope.selectedFilters.push(filter.code);
        console.log('selected filter - ' + $scope.selectedFilters)
      }
    }
  });

我创建了一个Code Pen在这个问题上。任何人都可以检查并纠正我做错了什么。

Answer 1

使用splice方法从数组中删除元素

$scope.setActiveFilter = function(filter, index) {
  filter.isActive = !filter.isActive;

  if (filter.isActive) {
    $scope.selectedFilters.push(filter.code);
    console.log('selected filter - ' + $scope.selectedFilters)
  } else {
    let index = $scope.selectedFilters.indexOf(filter.code);

    if (index > -1) {
      $scope.selectedFilters.splice(index, 1);
    }
  }
}