如何在angularjs中使用嵌套ng-repeat复选框

Question

Hello everyone i have faced some problem in case of nested checkbox uses. 大家好，我在嵌套复选框使用时遇到了一些问题。 In my problem im stuck on to how to use IncludeAll on click checkbox. 在我的问题上，我坚持如何在单击复选框上使用IncludeAll。 If checkbox value is true then it's give me a value of that. 如果复选框的值为true，则为我提供该值。 if IncludeAll checkbox is true then all checkbox will be selected and show the value of all in Array . 如果IncludeAll复选框为true，则将选中all复选框，并在Array中显示all的值。 and if one of the checkbox is false then IncludeAll checkbox false.. But in Case the other checkbox will be selected . 并且如果其中一个复选框为false，则IncludeAll复选框为false。。 但是，在其他情况下，将选中另一个复选框 。

This is my Fiddle Link : http://jsfiddle.net/0x4396pu/1/ 这是我的小提琴链接： http : //jsfiddle.net/0x4396pu/1/

Here is my Html Code: 这是我的HTML代码：

 <form action="#" ng-controller='MyCtrl'>
     <div class="control-group" ng-repeat="story in stories">
     <br>
     <input type="checkbox" ng-model="story.selectionAll">
        <label class="control-label">IncludeAll {{story}}</label>
        <div class="controls">
            <label class="checkbox inline" ng-repeat="browser in browsers">
                <input type="checkbox" value="{{browser}}"  
                   ng-model="selection[story].browsers[browser]"
                   ng-checked="story.selectionAll"> 
               {{browser}}
           </label>
       </div>
    </div>
</div>
<pre>{{selection | json }}</pre>
</form>

Here is my Controller file : 这是我的控制器文件：

function MyCtrl($scope) {
  $scope.stories = ['1', '2', '3'];
  $scope.browsers = ['IE', 'Chrome', 'Firefox','Safari','Opera'];
  $scope.selection = {};
  angular.forEach($scope.stories, function(story) {
     $scope.selection[story] = {
       browsers: {},
     };
  });
}

Thanks in Advance. 提前致谢。

Answer 1

Your "include all" checkbox is trying to set .selectionAll property on a String ( story in stories gives you a String ). 您的“全部包含”复选框试图在String上设置.selectionAll属性（ story in stories为您提供String ）。
You can't use ng-checked to somehow "work together" with ng-model . 您不能使用ng-checked与ng-model一起“协同工作”。 If you want your "include all" checkbox to select all subordinate checkboxes and vice versa, you'll need to watch the changes and provide some logic connecting the two things in your controller. 如果希望“包括所有”复选框选择所有从属复选框，反之亦然，则需要注意更改并提供一些逻辑来连接控制器中的两件事。

For example, if you want change of the "include all" checkbox value to influence other checkboxes, you'd have to do something like 例如，如果要更改“包括所有”复选框的值以影响其他复选框，则必须执行以下操作

<input type="checkbox" ng-model="selection[story].all" ng-change="updateAll(story)">

and in your controller 并在您的控制器中

$scope.updateAll = function (story) {
    var checked = $scope.selection[story].all;
    $scope.browsers.forEach(function (browser) {
        $scope.selection[story].browsers[browser] = checked;
    });
};

and handle changes of the individual checkboxes in a similar fashion. 并以类似方式处理各个复选框的更改。

Answer 2

I am answer my own Question. 我在回答我自己的问题。 But anyway Here is Answer how to select Checkbox in Nested ng-repeat.i think It's Help you Thanks. 但是无论如何，这是答案如何在嵌套的ng-repeat中选择复选框。我认为这对您有所帮助。

Http Plunkr LInk http://plnkr.co/edit/OQxi53xtVKOgToPhzDUZ?p=preview Http Plunkr LInk http://plnkr.co/edit/OQxi53xtVKOgToPhzDUZ?p=preview

Here is Html Code: 这是HTML代码：

  <!DOCTYPE html>
  <html ng-app="myApp">
    <head>
       <link rel="stylesheet" href="style.css">
       <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4
        /angular.min.js">
      </script>
     <script src="script.js"></script>
    </head>
<body>
  <form action="#" ng-controller='detailContrller'>
   <div class="control-group" ng-repeat="story in stories"> <br>
      <h4> Enter Data </h4>
             Name :  <input type="text" data-ng-model="selection[story].Name1" 
                        placeholder="Enter Name">  <br>
          Address :  <input type="text" data-ng-model="selection[story].Name2" 
                        placeholder="Enter Address">  <br>
          City :    <input type="text" data-ng-model="selection[story].Name3"
                        placeholder="Enter City">  <br>
          Phone :  <input type="text" data-ng-model="selection[story].Name4" 
                        placeholder="Enter Phone ">  <br>
          State :  <input type="text" data-ng-model="selection[story].Name5" 
                        placeholder="Enter State">  <br>

    <input type="checkbox" ng-model="selection[story].all"
            ng-change="updateAll(story)">
    <label class="control-label">IncludeAll {{story}}</label>
        <div class="controls">
            <label class="checkbox inline" ng-repeat="browser in browsers">
                <input type="checkbox" value="{{browser}}"
                 ng-model="selection[story].browsers[browser]" 
                   ng-change="checkChange(browser)"
                > {{browser}}
                </label>
            </div>
    </div>
      <button type="button" data-ng-click="save()">Save</button>
      <pre>{{selection | json}}</pre>
    </form>
   </body>
</html>

Here is my Controller 这是我的控制器

var app = angular.module("myApp",[]);

app.controller('detailContrller', function($scope){

$scope.stories = [];
$scope.browsers = ['IE', 'Chrome', 'Firefox','Safari','Opera'];
$scope.selection = {};
$scope.details = {};

 var checked;
 $scope.updateAll = function (story) {
    checked = $scope.selection[story].all;
    $scope.browsers.forEach(function (browser) {
        $scope.selection[story].browsers[browser] = checked;
    });
 };

 for(var i = 0; i< 3; i++) {
  $scope.stories.push(i+1);
 }
  $scope.checkChange = function (browser) {
    for(var i =0; i< $scope.stories.length; i++){
        if(!$scope.stories[i].selected){
        checked = false
        return false;
        }
     }
  }
    angular.forEach($scope.stories, function(storgy) {
       $scope.selection[storgy] = {
        browsers: {}
      };
    });

  $scope.save = function () {
   console.log($scope.selection);
  }
})

如何在angularjs中使用嵌套ng-repeat复选框

问题描述

2 个解决方案

解决方案1
2 2014-11-26 12:28:05

解决方案2
2 已采纳 2014-11-28 12:13:14

如何在angularjs中使用嵌套ng-repeat复选框

问题描述

2 个解决方案

解决方案1 2 2014-11-26 12:28:05

解决方案2 2 已采纳 2014-11-28 12:13:14

解决方案1
2 2014-11-26 12:28:05

解决方案2
2 已采纳 2014-11-28 12:13:14