Angular複選框：ng-checked及其在ng-model中的適當使用

<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的文檔。我實際上認爲我已經理解了它，並試圖寫一些例子。Angular複選框：ng-checked及其在ng-model中的適當使用

我認爲它可以用來選擇和取消選擇所有兒童複選框，同時更新每個孩子的ng模型。只有當用戶選擇了子項時，我才能使用ng-model將檢查值存儲在範圍內。當選擇父母時，其值反映爲已更改，但不會更改任何孩子。

我在我的小提琴中有三個例子，第一個顯示了我在其他兩個例子中預期的行爲。 IOW，我很驚訝兒童複選框不是用testmodel啓動的，也不是父代值在testmodel中註冊的。這是預料之外的行爲還是有我的調試有問題？

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

來源

2013-11-03 scalaGirl

這裏是我是如何處理你的問題。它得到它的工作，並可以從這裏進行重構很容易，我認爲：

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-03 22:57:01 JeremyS

您也可以通過與類似單擊事件切換燈泡本身所以：http://jsfiddle.net/c92xq/ – JeremyS

傑里米你的回答是對的，但我的小提琴不是預定的。我似乎沒有更新我的小提琴，所以我會嘗試重新提交我的問題，然後如果成功刪除這一個。我真誠的道歉。 – scalaGirl

好問題，但這個答案沒有解決如何處理主/從複選框。 – Mark

Angular複選框：ng-checked及其在ng-model中的適當使用

回答

相關問題