Angular JS：在ng-repeat中添加和删除复选框中的术语？

I have a miller column constructed in Angular and Bootstrap.

我有一个用Angular和Bootstrap构造的磨机柱。

In the second column, clicking the word (link) opens the third column, but I need to have the checkbox add that word to an array of search terms.

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

If the checkbox is UN-checked, I need to remove that word from the array of search terms. As you can see in the pen, I have the adding part working, but un-checking the box adds the word again.

如果复选框是UN检查的,我需要从搜索项数组中删除该单词。正如你在笔中看到的那样,我有添加部分工作,但是取消选中框会再次添加单词。

I realize what I need to do is somehow check the state of the checkbox and if it's true add the word and if it's false check the array for the word (string) and pop it out of the array.

我意识到我需要做的是以某种方式检查复选框的状态,如果它是真的添加单词,如果它是假,检查数组的单词(字符串)并将其弹出数组。

I can't figure out how to check only the checkbox that was clicked.

我无法弄清楚如何只检查被点击的复选框。

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

the ng-change on the checkbox calls:

复选框上的ng-change调用:

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

4 个解决方案

#1

Add this code in place of your _change function it works for sure

添加此代码代替您确实可用的_change函数

 _this.change = function (index) {
    console.log('Clicked on', _this.millercolumn.level1[index].name);
    var searchTerm = _this.millercolumn.level1[index].name;
    var searchIndex = _this.searchTerms.indexOf(searchTerm);
    if (searchIndex == -1) {   // If new push
       _this.searchTerms.push(searchTerm);
    }
    else {                    // Else remove item
      _this.searchTerms.splice(searchIndex, 1);
    }
    console.log(_this.searchTerms);
  };

Working codepen demo : http://codepen.io/krishcdbry/pen/EgKgBv

工作codepen演示:http://codepen.io/krishcdbry/pen/EgKgBv

#2

It looks like you're thinking in a jquery mindset where you need to handle events when something changes. An easier way would be to make each checkbox correspond to an item in the array, so the ng-model would be something like level1.isSelected. Then, to construct your search terms array, use scope.$watch and pass true as the 3rd argument to deep watch your array of items. When a checkbox is checked, your watch will be called and you can reconstruct the search terms array by plucking the terms of the list items that are selected.

看起来你正在思考一个jquery心态,你需要在事情发生变化时处理事件。一种更简单的方法是使每个复选框对应于数组中的项,因此ng-model类似于level1.isSelected。然后,要构建搜索术语数组,请使用范围。$ watch并传递true作为第3个参数来深入观察您的项目数组。选中复选框后,将调用您的手表,您可以通过选择所选列表项的条款来重建搜索项阵列。

#3

You're running the same code no matter if the checkbox is checked or not. Try something like this:

无论是否选中该复选框,您都运行相同的代码。尝试这样的事情:

_this.change = function (index, checked) {
  var searchTerm = _this.millercolumn.level1[index].name;
if(checked){


    _this.searchTerms.push(searchTerm);
}
if(!checked){
 _this.searchTerms.splice(searchTerm);
}
  };

#4

FWIW, this is what I did, which works:

FWIW,这就是我所做的,它有效:

<input type="checkbox" ng-model="level1.isSelected" ng-change="pmt.change($index, level1)" id="mycb" />

  _this.change = function (index, item) {
    if (item.isSelected) {
      _this.searchTerms.push(item.name);
    } else {
      var termToRemove = item.name;
      for (var i = _this.searchTerms.length - 1; i >= 0; i--) {
        if (_this.searchTerms[i] === termToRemove) {
          _this.searchTerms.splice(i, 1);
        }
      }
    }
  };

#1