ng.checked in angular.js funktioniert nicht mit HTML anfügen

Es ist eine Todo-App. Wenn Sie etwas in die Eingabe eingeben, wird der neue Code an div.container angefügt. Und dann die "Neugeborenen" -Kontrollkästchen mit ng-checked="checkAll" (die alle Kontrollkästchen in container überprüfen sollte) reagiert nicht auf Änderungen in der Haupt-Kontrollkästchen mit ng-model="checkAll". In dieser Zeit reagiert das bereits vorhandene sekundäre Kontrollkästchen mit ng-checked auf das Hauptfeld. Wie behebt man das?ng.checked in angular.js funktioniert nicht mit HTML anfügen

<body ng-app="App" ng-controller="AppCtrl"> 
<h1 class="heading">TODODO!</h1> 

<div class="container"> 
    <form ng-submit="newTask()"> 
     <input type="checkbox" ng-model="checkAll"> 
     <input type="text" ng-model="text" name="text" placeholder="What tododo?"> 
    </form> 
    <input type="checkbox" ng-checked="checkAll"> 
</div> 
</body>

Script:

var App = angular.module("App", []); 

App.controller('AppCtrl', function ($scope) { 
    $scope.list = []; 
    $scope.newTask = function() { 
     if ($scope.text) { 
      $('.container').append("<div class='task'><input type='checkbox' ng-checked='checkAll'/>" + this.text + "</div>"); 
      $scope.list.push(this.text); 
      $scope.text = ''; 
     } 
    }; 

});

Quelle

2016-03-18 Alex Tumanov

Problem ist, dass beide Kontrollkästchen das gleiche Modell verwenden. Erstellen Sie für jedes ein anderes Modell und auch ng-geprüft. Wenn Sie bei der Auswahl eines anderen Kontrollkästchens keine anderen Kontrollkästchen aktivieren möchten, haben diese Kontrollkästchen ihre eigenen Eigenschaftsnamen. Zum Beispiel:

<body ng-app="App" ng-controller="AppCtrl"> 
<h1 class="heading">TODODO!</h1> 

<div class="container"> 
    <form ng-submit="newTask()"> 
     <input type="checkbox" ng-model="doNotAffectSecond" ng-checked="doNotAffectSecond"> 
     <input type="text" ng-model="text" name="text" placeholder="What tododo?"> 
    </form> 
    <input type="checkbox" ng-model="doNotAffectFirst" ng-checked="doNotAffectFirst"> 
</div> 
</body>

Dies ist allgemein, Sie können es anpassen. In Ihrem Fall, wenn Sie das erste Kontrollkästchen aktivieren, wird checkAll wahr und der zweite mit automatisch überprüft werden.

Quelle

2016-03-18 18:57:17 dpaul1994

Das Ziel ist es, das Haupt-Kontrollkästchen zu zwingen, alle sekundären Prüfungen zu beeinflussen. –

'In dieser Zeit reagiert das bereits vorhandene sekundäre Kontrollkästchen mit ng-checked auf das Hauptfeld. Wie repariere ich das? 'Tut mir leid, aber was willst du dann reparieren? – dpaul1994

Es ist in Ordnung, mb Ich bin nicht klar genug :) Ich meinte, dass die Eingabe, die direkt nach der 'Form' geht auf die Hauptprüfung reagiert, während diejenigen, die durch Skript (in' div.task' Tag) nicht erstellt reagieren - und das ist das Problem. –

ng.checked in angular.js funktioniert nicht mit HTML anfügen

Antwort

Verwandte Themen