javascript - Angular JS : Add and remove terms from checkboxes in ng-repeat?

Question

我有一个用 Angular 和 Bootstrap 构建的米勒列。

http://codepen.io/smlombardi/pen/WGwGbY

在第二列中，单击单词(链接)将打开第三列，但我需要使用复选框将该单词添加到搜索词数组中。

如果未选中该复选框，我需要从搜索词数组中删除该词。正如您在笔中看到的，我的添加部分正在工作，但取消选中该框会再次添加该单词。

我意识到我需要做的是以某种方式检查复选框的状态，如果为 true，则添加该单词，如果为 false，则检查数组中的单词(字符串)并将其从数组中弹出。

我不知道如何仅检查被单击的复选框。

   <div class="col-xs-3 inner-column">
<div class="panel panel-default">

  <div class="list-group">
    <div class="list-group-item" ng-class="{active: $index === pmt.millercolumn.level1Selected }" ng-repeat="level1 in pmt.millercolumn.level1 track by $index">
     <input type="checkbox" ng-model="activeSearchTerm" ng-change="pmt.change($index)" id="ng-change-example1" />
      <a href="" ng-click="pmt.getSublevel2($index)" >
        {{level1.name}}
        <i class="pull-right fa fa-angle-right fa-lg"></i>
      </a>
    </div>
  </div>
</div>

复选框上的 ng-change 调用:

   _this.change = function (index) {
    var searchTerm = _this.millercolumn.level1[index].name;
    _this.searchTerms.push(searchTerm);
  };

Answer 1

看起来您正在以 jquery 思维方式思考，当某些事情发生变化时，您需要处理事件。一种更简单的方法是让每个复选框对应于数组中的一个项目，因此 ng-model 将类似于 level1.isSelected。然后，要构建您的搜索词数组，请使用scope.$watch并传递true作为第三个参数来深度监视您的项目数组。选中复选框后，您的 watch 将被调用，您可以通过提取所选列表项的术语来重建搜索词数组。