如何在angularjs中使用带有嵌套ng-repeat的复选框答案

【问题标题】：How to use checkbox with nested ng-repeat in angularjs如何在angularjs中使用带有嵌套ng-repeat的复选框
【发布时间】：2015-01-24 17:34:00
【问题描述】：

大家好我在使用嵌套复选框时遇到了一些问题。在我的问题中，我坚持如何在单击复选框上使用 IncludeAll。如果复选框值为真，那么它会给我一个值。如果 IncludeAll 复选框为真，则所有复选框将被选中并显示 Array 中的所有值。如果其中一个复选框为 false，则 IncludeAll 复选框为 false..但如果另一个复选框将被选中。

这是我的小提琴链接： http://jsfiddle.net/0x4396pu/1/

这是我的 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>

这是我的控制器文件：

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: {},
     };
  });
}

提前致谢。

【问题讨论】：

标签： javascript html angularjs checkbox

【解决方案1】：

我正在回答我自己的问题。但无论如何，这里是如何在嵌套 ng-repeat 中选择复选框的答案。我认为这对你有帮助，谢谢。

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

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

这是我的控制器

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

【讨论】：

【解决方案2】：

您的“包括所有”复选框正在尝试在 String 上设置 .selectionAll 属性（story in stories 为您提供 String）。
您不能使用ng-checked 以某种方式与ng-model“一起工作”。如果您希望“包含所有”复选框选择所有从属复选框，反之亦然，您需要观察变化并提供一些逻辑来连接控制器中的两个事物。

例如，如果您希望更改“包含所有”复选框的值以影响其他复选框，则必须执行类似的操作

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

在你的控制器中

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

并以类似的方式处理各个复选框的更改。

【讨论】：

嘿#hon2a 你能帮我更多吗..通过在小提琴或 plunkr 中举例说明。
嘿#hon2a 我已经检查过了，它工作正常。感谢您的详细解释。