如何在angularjs中使用嵌套ng-repeat復選框

Question

大家好，我在嵌套復選框使用時遇到了一些問題。 在我的問題上，我堅持如何在單擊復選框上使用IncludeAll。 如果復選框的值為true，則為我提供該值。 如果IncludeAll復選框為true，則將選中all復選框，並在Array中顯示all的值。 並且如果其中一個復選框為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: {},
     };
  });
}

提前致謝。

Answer 1

您的“全部包含”復選框試圖在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;
    });
};

並以類似方式處理各個復選框的更改。

Answer 2

我在回答我自己的問題。 但是無論如何，這是答案如何在嵌套的ng-repeat中選擇復選框。我認為這對您有所幫助。

Http Plunkr LInk 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);
  }
})

如何在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