2016-03-23 8 views
0

動作しない私のコードです:AngularJS:チェックするチェックボックス内の属性は、ここで

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

チェックボックスはデフォルトでチェック可能性があるため、私は特に、各<input>タグにchecked属性を追加します。しかし、結果は4つのチェックボックスのどれもチェックされていません。どうして?

ng-checked="num"属性を付けると、チェックされた作業を行うことができますが、なぜ自然チェックのarrtibuteが機能しないのだろうかと疑問に思っています。デフォルトではangular docs

から

答えて

0

、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> 
0

ng-model="array[$index]"は、DOMがfalse

にプロパティを確認し設定します。この方法でそれを行ってください
0

チェックをng-modelと組み合わせて使用​​しないでください。 ng-modelでng-checkedにも同じことが適用されます。両方ともチェックボックスのチェック状態を変更すると、予期しない動作につながります。

デフォルトでチェックボックスをオンにしたい場合は、ng-modelディレクティブを使用してください。

使用している構造がちょっと変わっているようです。角度が値と一致しないため、チェックボックスはチェックされません。

デフォルトでは、チェックボックスでng-modelを使用すると、ユーザーがそのモデルとやりとりしたときにng-model値にtrueとfalseが返されます。 ng-true-valueng-false-valueを使用して変更できます。 angular documentationを確認してください。

あなたはのは、あなたのチェックボックスにNG-真の値=「2」を言わせて追加した場合、それは限りcheckedが動作しない理由として値2

0

で始まるので、2番目の1が最初に選択されます:角度がng-checkedまたはng-modelのいずれかを使用してチェックボックスにバインドすると、checked属性が設定され、チェックボックスがブラウザで正しく表示されます。最初のバインド時にはcheckedの属性は無視されます。

関連する問題