AngularJS:使用ng-repeat生成复选框

时间:2016-04-06 09:12:47

标签: angularjs

我得到了一个我理解的代码,但是一个小区域并不清楚。所以请帮助我理解。

<div ng-controller="MainCtrl">
  <label ng-repeat="(color,enabled) in colors">
      <input type="checkbox" ng-model="colors[color]" /> {{color}} 
  </label>
  <p>colors: {{colors}}</p>

<script>
  var app = angular.module('plunker', []);

  app.controller('MainCtrl', function($scope){
      $scope.colors = {Blue: true, Orange: true};
  });
</script>

http://plnkr.co/edit/U4VD61?p=preview

请参阅此行ng-model="colors[color]"此行如何自动设置复选框选中或取消选中状态,因为在代码中我们未提及checked = true or false然后角度如何自动从模型中提取true或false并将其设置为复选框.. .....这不清楚。请指导我。

1 个答案:

答案 0 :(得分:2)

如果ng-model值为ng-model

angular true会检查复选框。您已Blue作为true。因此ng-model会检查复选框。

如果您使用角度ng-model,它会自动填充任何表单字段的值。您无需放置ng-checked = true或其他内容

How to check if any Checkbox is checked in Angular

https://docs.angularjs.org/api/ng/input/input%5Bcheckbox%5D