1 
<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只有当用户选择了孩子时，我才能将检查值存储在范围内。When the parent is selected its value is reflected as changed it does not change any of the children.

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

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

4

2 回答 2

1

不要ng-checked与ng-model. 用于ng-checked单向绑定；用于ng-model双向绑定。

从文档：

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

有关详细信息，请参阅

于 2019-05-22T14:02:00.973 回答
0

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

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;
};
}
于 2013-11-03T22:57:01.963 回答