Question

我正在尝试创建一个列表，其中有多个全选按钮用于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>

Answer 1

你可以尝试一下。这个例子你可以根据需要操纵它 https://plnkr.co/edit/qD7CABUF9GLoFCb8vDuO?p=preview

 $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

     })
   }
   }

HTML：

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

Answer 2

请检查ngChecked指令。您需要将其添加到输入

<input type="checkbox" ng-checked="i.isChecked" />

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

Answer 3

您只需将变量设置为imagename= myRow["Photo"].ToString(); imagepath = imagename.Split(splitchar, StringSplitOptions.RemoveEmptyEntries); for (int j = 0; j <= imagepath.Length-1;j++ ) { if(imagepath[j]!=null) { string imagefinals = paths + imagepath[j]; pics[j].ImageLocation = imagefinals; pics[j].SizeMode = PictureBoxSizeMode.StretchImage; } } return;，就像这样

true

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

ng-checked

<强> HTML

ng-checked="selectAll"

Answer 4

创建了一个小提琴，展示了您对“全部选择”要求的需求 - http://jsfiddle.net/deeptechtons/TKVH6/

//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;
        });

    };


});

Answer 5

查看下面给出的代码段，这会给你一些想法。

＆＃13;

var app = angular.module("myApp",[]);

app.controller('demoCtrl',function($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 = function(item){
  
    for(var i =0;i < item.forms.length;i++)
      {
        
        item.forms[i].isChecked = true;
      }
  
  }
  
  $scope.removeAll = function(item) {
  
    
    for(var i =0;i < item.forms.length;i++)
      {
       
        item.forms[i].isChecked = false;
      }
  }
  
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

  <div ng-app="myApp">
    
    <div ng-controller="demoCtrl">
      
          <div ng-repeat="item in itemsArray">
      
            <span>{{item.name}}</span>
            
            <button ng-click="selectAll(item)"> select All </button> 
            
            <button ng-click="removeAll(item)"> Deselect All </button>  
            
              <div ng-repeat="i in item.forms">
              
                <input type="checkbox"   ng-model="i.isChecked"/>
                
              </div>  
            
            </div>
   </div>
    </div>

＆＃13;

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

5 个答案: