Fatal编程技术网
  • javascript/
  • Javascript 如何选择嵌套ng repeat中的所有复选框

Javascript 如何选择嵌套ng repeat中的所有复选框

javascript angularjs

Javascript 如何选择嵌套ng repeat中的所有复选框,javascript,angularjs,Javascript,Angularjs,我正在尝试创建一个列表，其中有多个select all按钮可用于ng repeat复选框。 HTML代码 <div class="col-xs-12"ng-repeat="items in testArray"> <div class="col-xs-6"> {{items.brand}} </div> <div class="col-xs-6 col-sm-offset-6"> <bu

我正在尝试创建一个列表，其中有多个select all按钮可用于ng repeat复选框。 HTML代码

<div class="col-xs-12"ng-repeat="items in testArray">
    <div class="col-xs-6">
        {{items.brand}}
    </div>
    <div class="col-xs-6 col-sm-offset-6">
        <button ng-click="selectAll()">select All</button>
        <div ng-repeat="i in items.form">
            <input type="checkbox"/>{{i.formName}}
        </div>
    </div>
</div>


{{items.brand}
全选
{{i.formName}}
您可以像这样简单地将变量设置为
true

ng-click="selectAll = true"
然后使用
ng checked
指令将复选框设置为checked（当内部表达式为true时）

ng-checked="selectAll"
HTML

<div class="col-xs-12"ng-repeat="items in testArray">
    <div class="col-xs-6">
    {{items.brand}}
    </div>
    <div class="col-xs-6 col-sm-offset-6">
        <button ng-click="selectAll = true">select All</button>
        <div ng-repeat="i in items.form">
            <input type="checkbox"  ng-checked="selectAll"/>{{i.formName}}
        </div>
    </div>
</div>


{{items.brand}
全选
{{i.formName}}
请检查指令。您需要将其添加到输入中

然后在selectAll（）方法中，将每个项的isChecked属性设置为true

创建了一个小提琴，展示了您对“全选”要求的需求-

//html

    

  • 全部检查

    • 

  • 
{{item.Name}

    • 


//js
角度模块（“CheckAllModule”，[]）
.controller（“checkboxController”，函数checkboxController（$scope）{
$scope.Items=[{
名称：“第一项”
}, {
名称：“项目二”
}, {
名称：“项目三”
}];
$scope.checkAll=函数（）{
如果（$scope.selectedAll）{
$scope.selectedAll=true；
}否则{
$scope.selectedAll=false；
}
angular.forEach（$scope.Items，function（item）{
item.Selected=$scope.selectedAll；
});
};
});
您可以尝试一下。在这个示例中，您可以根据需要对其进行操作

html:


全选
复选框
看看下面给出的代码片段，这会给你一些想法

var-app=angular.module（“myApp”，[]）；
应用程序控制器（'demoCtrl'，函数（$scope）{
$scope.itemsArray=[{name:“Test 1”，forms:[{formName:“xyz 1”}，{formName:“xyz 1”}，{name:“Test 2”，forms:[{formName:“xyz 2”}，{formName:“xyz 1”}，{name:“Test 3”，forms:[{formName:“xyz 3”}，{formName:“xyz 1”}]；
$scope.selectAll=功能（项目）{
对于（var i=0；i


{{item.name}
全选
取消选择全部

您能再解释一下吗？包含代码当前状态的JSFIDLE将非常好。感谢Gopinath，但我需要选中嵌套ng repeat中的复选框。在上面的代码中，我嵌套了ng Repeatso，实现方式是一样的，抓住上面的逻辑：）我需要将选中复选框的值添加到数组中。我该怎么做？感谢您的帮助Use
ng change=“toggle（i）”
调用控制器中的一个函数，将
i
添加到数组中，您可以从数组@Tharindu Senanayakhethan获取选中复选框的值。您创建了我的dayDinesh Event，尽管这有助于我选中所有复选框，但当我选中单个复选框时，我无法获取所选单个复选框的值。是否有一个解决方案，您还应该获得单个复选框值，在控制台中打印出项目对象并查看详细信息，您选择的特定对象（不是所有项目）中存在“isChecked”值。为什么不使用单个
函数
？示例：
handlecheckbox（项目、标志）
，然后在视图中：
，删除时相同：
。

//html

<div>
    <ul ng-controller="checkboxController">
        <li>Check All
            <input type="checkbox" ng-model="selectedAll" ng-click="checkAll()" />
        </li>
        <li ng-repeat="item in Items">
            <label>{{item.Name}}
                <input type="checkbox" ng-model="item.Selected" />
            </label>
        </li>
    </ul>
</div>

//js
angular.module("CheckAllModule", [])
    .controller("checkboxController", function checkboxController($scope) {


    $scope.Items = [{
        Name: "Item one"
    }, {
        Name: "Item two"
    }, {
        Name: "Item three"
    }];

    $scope.checkAll = function () {
        if ($scope.selectedAll) {
            $scope.selectedAll = true;
        } else {
            $scope.selectedAll = false;
        }
        angular.forEach($scope.Items, function (item) {
            item.Selected = $scope.selectedAll;
        });

    };


});



 $scope.test=function(event){

     if(event.currentTarget.checked==true)
   { 
     var togglestatus=$scope.isAllSelected;
     angular.forEach($scope.options,function(object){

       object.selected=togglestatus

     })



   }else{
      angular.forEach($scope.options,function(object){

       object.selected=false

     })
   }
   }



 <body ng-app="test" ng-controller="testctrl">
       <label>
       <input type="checkbox" ng-model="isAllSelected" ng-click="test($event)">SelectAll</label>

       <div ng-repeat="option in options">
         <input type="checkbox" ng-model="option.selected">checkbox</div>

      </body>