2016-03-23 15 views
0
nicht

Hier ist mein Code:AngularJS: Attribut in Checkbox aktiviert funktioniert

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

ich besonders hinzufügen checked Attribut zu jedem <input> Tag, für das Kontrollkästchen standardmäßig aktiviert kann. Aber das Ergebnis ist keines der vier Kontrollkästchen ist aktiviert. Warum?

Ich weiß, wenn ich hinzufügen ng-checked="num" Attribut könnte die überprüfte Arbeit machen, aber ich frage mich immer noch, warum die natürliche überprüft arrtibute funktioniert nicht.

Antwort

0

Von angular docs

standardmäßig Uhren ngModel das Modell als Referenz, nicht Wert.

Wenn Sie array[$index] sagen, es gibt Wert ganze Zahl, die Sie Modellname ist und seine falsche

Bitte tun Sie es auf diese Weise

<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]" setzt der dom-Eigenschaft auf false geprüft

0

Sie sollten nicht geprüft mit ng-Modell kombinieren. Gleiches gilt für ng-checked mit ng-Modell. Beide modifizieren das Kontrollkästchen checked checked, was zu unvorhersehbarem Verhalten führt.

Wenn Sie möchten, dass Ihre Checkbox standardmäßig überprüft wird, tun Sie dies über die ng-model-Direktive.

Die Struktur, die Sie verwenden, scheint ein bisschen komisch. Die Kontrollkästchen sind nicht aktiviert, da angular nicht mit dem Wert übereinstimmen kann.

Wenn Sie standardmäßig ng-model für ein Kontrollkästchen verwenden, erhalten Sie im ng-model-Wert true und false, wenn der Benutzer damit interagiert. Sie können dies ändern, indem Sie ng-true-value und ng-false-value verwenden. Überprüfen Sie angular documentation.

Wenn Sie das addieren lassen sagen ng-true-Wert = „2“ auf Ihre Kontrollkästchen, dann wird die zweite zunächst ausgewählt werden, da es mit dem Wert beginnt 2.

0

Soweit warum checked funktioniert nicht : Wenn eckig an das Kontrollkästchen mit ng-checked oder ng-model bindet, setzt es das Attribut checked, so dass das Kontrollkästchen im Browser richtig aussieht - es ist egal, was das checked Attribut ist, wenn es zuerst bindet.

Verwandte Themen