AngularJS：復選框中的選中屬性不起作用

Question

這是我的代碼：

<body ng-app="app">
<div ng-controller="TestController">
    <input type="checkbox" checked ng-repeat="num in array track by $index" ng-model="array[$index]" />
</div>
<script type="text/javascript">
    var app = angular.module('app', []);
    app.controller('TestController', function ($scope) {
        $scope.array = [1, 2, 3, 4];
    });
</script>

我特別將checked屬性添加到每個<input>標記中，因為默認情況下可以選中此復選框。 但是結果是四個復選框均未選中。 為什么？

我知道是否可以添加ng-checked="num"屬性來使已檢查的工作正常，但是我仍然想知道為什么自然的檢查arrtibute無法正常工作。

Answer 1

從角度文檔

默認情況下，ngModel通過引用而非值監視模型。

當您說array[$index]它給出的整數值就是您的模型名稱，這是錯誤的

請這樣

<div ng-controller="TestController">
    <input type="checkbox" checked ng-repeat="num in array track by $index" ng-model="array[$index].checked" title="{{array[$index].val}}" />
</div>
<script type="text/javascript">
    var app = angular.module('app', []);
    app.controller('TestController', function ($scope) {
        $scope.array = [{val:1,checked:true},{val:2,checked:false},{val:3,checked:true},{val:4,checked:true},{val:5,checked:false}];
    });
</script>

Answer 2

ng-model="array[$index]"將dom Checked屬性設置為false

Answer 3

您不應將checked與ng-model結合使用。 同樣適用於使用ng-model進行ng檢查。 兩者都修改了復選框選中狀態，這導致了不可預測的行為。

如果您想默認選中復選框，請通過ng-model指令執行。

您正在使用的結構似乎有些奇怪。 未選中您的復選框，因為angular無法匹配該值。

默認情況下，在復選框上使用ng-model時，當用戶與ng-model進行交互時，會在ng-model值中產生true和false。 您可以使用ng-true-value和ng-false-value進行更改。 檢查角度文檔。

如果您將ng-true-value =“ 2”添加到您的復選框，則第二個將首先被選中，因為它以值2開頭。

Answer 4

至於為什么checked不起作用：當使用ng-checked或ng-model將angular綁定到復選框時，它設置了checked屬性，以便該復選框在瀏覽器中看起來正確-不在乎checked屬性是什么是第一次綁定時。

AngularJS：復選框中的選中屬性不起作用

問題描述

4 個解決方案

解決方案1
0 已采納 2016-03-23 16:27:14

解決方案2
0 2016-03-23 16:33:03

解決方案3
0 2016-03-23 16:35:02

解決方案4
0 2016-03-23 16:39:11

AngularJS：復選框中的選中屬性不起作用

問題描述

4 個解決方案

解決方案1 0 已采納 2016-03-23 16:27:14

解決方案2 0 2016-03-23 16:33:03

解決方案3 0 2016-03-23 16:35:02

解決方案4 0 2016-03-23 16:39:11

解決方案1
0 已采納 2016-03-23 16:27:14

解決方案2
0 2016-03-23 16:33:03

解決方案3
0 2016-03-23 16:35:02

解決方案4
0 2016-03-23 16:39:11