Question

<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/

Answer 1

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

从文档中：

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

有关更多信息，请参见

AngularJS ng-checked Directive API Reference

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

Angular复选框：ng-checked及其与ng-model的适当使用

2 个答案: