选择NG重复内的所有复选框 [英] select all checkboxes inside ng-repeat

问题描述

上午有复选框以ng重复列表如下：

 ＆LT; D​​IV NG重复=项成果＆GT;
      ＆LT;标签类=inlinelabel复选框＆GT;
        ＆LT;输入类型=复选框NG模型=选择了[item.id]＆GT;＆LT; I＆GT;＆LT; / I＆GT;
      ＆LT; /标签＆gt;
＆LT; / DIV＆GT;
 

我想选择一个复选框是NG重复之外点击所有的复选框。

 ＆LT;标签＆gt;全选＆LT; /标签＆gt;
＆LT;输入类型=复选框数据-NG-模式=selectedAllNG点击=checkAll（）＆GT;
 

我试过code的控制器，但它不工作。

  $ scope.checkAll =（）=＆GT; {
                如果（$ scope.selectedAll）{
                    $ scope.selectedAll = TRUE;
                }其他{
                    $ scope.selectedAll = FALSE;
                }
                angular.forEach（$ scope.employees，功能（选择）{
                    选择[selected.id] = $ scope.selectedAll;
                }）;
            }
 

解决方案

其他的答案这里确实使所有的选择复选框，但我认为这个想法是让底层的模式也发生变化，这这些问题的答案不这样做

这是因为角度不会改变，当 NG-检查修改模型。相反，以全选正确的方法是改变车型 - 和查看就直接

 ＆LT;按钮NG点击=全选（）＆GT;选择全部＆LT; /按钮＆GT;
＆LT; D​​IV NG重复=项中的项目＆GT;
  ＆LT;标签＆gt;
    {{item.n}}：
    ＆LT;输入类型=复选框NG模型=选择了[item.id]＆GT;
  ＆LT; /标签＆gt;
＆LT; / DIV＆GT;
 

和控制器，只需将所有的项目是真正在选：

  $ scope.selected = {};
$ scope.selectAll =功能（）{
  对于（VAR I = 0; I＆LT; $ scope.items.length;我++）{
    VAR项目= $ scope.items [I]    $ scope.selected [item.id] = TRUE;
  }
};
 

plunker

视图模型驱动器的说法（与双向指令外，如 NG-模型，允许视图改变视图模型，通常基于在用户交互），所以只要你想改变一些东西，问自己启动我怎么想的视图模型看起来像，而不是，查看外观。该视图将按照视图模型。

Am having a list of check boxes in ng-repeat as:

  <div ng-repeat="item in results">
      <label class="inlinelabel checkbox">
        <input type="checkbox" ng-model="selected[item.id]"><i></i>
      </label>
</div>

I would like to select all checkboxes on click of a single check box that is outside the ng-repeat.

   <label> Select All </label>
<input type="checkbox" data-ng-model="selectedAll" ng-click="checkAll()">

I tried the code in controller but its not working.

   $scope.checkAll=()=>{
                if ($scope.selectedAll) {
                    $scope.selectedAll = true;
                } else {
                    $scope.selectedAll = false;
                }
                angular.forEach($scope.employees,function (selected) {
                    selected[selected.id] = $scope.selectedAll;
                });
            }

解决方案

The other answers here indeed make all the checkboxes "selected", but I think the idea is to make the underlying model also change, which those answers fail to do.

This is because Angular would not change the model when ng-checked changes. Instead, the right way to "select all" is to change the models - and the View just follows.

<button ng-click="selectAll()">select all</button>
<div ng-repeat="item in items">
  <label>
    {{item.n}}:
    <input type="checkbox" ng-model="selected[item.id]">
  </label>
</div>

And in the controller, simply set all the items to be true in selected:

$scope.selected = {};
$scope.selectAll = function(){
  for (var i = 0; i < $scope.items.length; i++) {
    var item = $scope.items[i];

    $scope.selected[item.id] = true;
  }
};

plunker

The ViewModel "drives" the View (with the exception of the bi-directional directives, like ng-model, that allows the View to change the ViewModel, typically based on user interaction), so whenever you want to change something, start by asking yourself "how would I want the ViewModel to look like", rather than, how the View should look. The View will follow the ViewModel.

这篇关于选择NG重复内的所有复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！