Angular 复选框：ng-checked 及其与 ng-model 的适当使用 [重复]答案

【问题标题】：Angular checkbox: ng-checked and its appropriate use with ng-model [duplicate]Angular 复选框：ng-checked 及其与 ng-model 的适当使用 [重复]
【发布时间】：2013-11-03 22:16:34
【问题描述】：

<input type="checkbox"
       ng-checked="testModel.child_1 && testModel.child_2 && testModel.child_3 &&     testModel.child_4 && testModel.child_5"
       ng-model="isChecked"/>

我的目标是了解ng-checked 上的文档以及在使用复选框时它与ng-model 的适当用法。我实际上以为我已经理解它并正在尝试编写一些示例。

我认为它可以用于选择和取消选择所有子复选框，同时为每个孩子更新ng-model。只有当用户选择了孩子时，我才能使用ng-model 将检查值存储在范围内。选择父级时，其值被反映为已更改，它不会更改任何子项。

我的小提琴中有三个示例，第一个显示了我在其他两个示例中所期望的行为。 IOW，令我惊讶的是，子复选框没有使用 testmodel 启动，父值也没有在 testmodel 中注册。这是预期的开箱即用行为还是我的调试有问题？

http://jsfiddle.net/gogirl/7857c/2/

【问题讨论】：

不要将ng-checked 与ng-model 一起使用。使用ng-checked进行单向绑定；使用ng-model 进行双向绑定。

标签： angularjs

【解决方案1】：

不要将ng-checked 与ng-model 一起使用。使用ng-checked进行单向绑定；使用ng-model 进行双向绑定。

来自文档：

请注意，此指令不应与ngModel 一起使用，因为这可能会导致意外行为。

有关详细信息，请参阅

AngularJS ng-checked Directive API Reference

【讨论】：

【解决方案2】：

我是这样处理您的问题的。我认为它可以正常工作并且可以很容易地从这里重构：

HTML：

<body ng-app="myApp">
  <div ng-controller="MyCtrl">

   lightbulb is {{state}}     <input type="checkbox" ng-model=
   "state" ng-true-value="on" ng-false-value="off"> 

    <div ng-repeat="image in images"> 
        <a ng-click="toggleImage(state)">
            <img  ng-src="{{toggleImage(state)}}" />                                 
        </a>

    </div>
   </div>
</body>

JS：

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

function MyCtrl($scope) {
  $scope.state = "on";
  $scope.imgUrl = null
  $scope.images = [
    {imgUrl: 'http://www.w3schools.com/js/pic_bulboff.gif'}
  ];

  $scope.toggleImage = function (state) {
    onUrl = 'http://www.w3schools.com/js/pic_bulbon.gif'
    offUrl = 'http://www.w3schools.com/js/pic_bulboff.gif'
    if (state === "on") {
        imgUrl = onUrl;
    } else {
        imgUrl = offUrl; 
    }
    return imgUrl;
};
}

【讨论】：

您还可以通过单击事件来切换灯泡本身，如下所示：jsfiddle.net/c92xq
杰里米你的回答是对的，但我的小提琴不是预期的。我似乎没有更新我的小提琴，所以我会尝试重新提交我的问题，然后如果成功删除这个问题。我真诚的道歉。
好问题，但这个答案没有解决如何处理主/从复选框。