2016-03-18 15 views
0

これはToDoアプリです。入力に何かを入力すると、新しいコードがdiv.containerに追加されます。 ng-checked="checkAll"(すべてのチェックボックスをcontainerにチェックしてください)の「新生児」チェックボックスは、ng-model="checkAll"のメインチェックボックスの変更に応答しません。その時点で、すでに存在する副チェックボックスng-checkedが主なものに応答しています。それを修正するには?angel.jsのng.checkedがHTMLの追加で動作しない

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

スクリプト:

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 = ''; 
     } 
    }; 

}); 

答えて

0

問題は、両方のチェックボックスは、同じモデルを使用していることです。各モデルに対して異なるモデルを作成し、さらに検査します。チェックボックスをオンにしたときに他のチェックボックスに影響を与えたくない場合は、そのチェックボックスに自分のプロパティ名が表示されます。例:

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

これは一般的にカスタマイズできます。あなたの場合、最初のチェックボックスをチェックするとcheckAllが真となり、2番目のチェックボックスが自動的にチェックされます。

+0

メインのチェックボックスを強制的にすべての2次チェックに影響させることです。 –

+0

'その時点で、ng-checkedの既存のセカンダリチェックボックスは、メインのものに応答しています。それを修正するにはどうすればいいですか?「うん、申し訳ありませんが、何を修正したいですか? – dpaul1994

+0

それは大丈夫です、mb私は十分にはっきりしていません:) 私は、 'form'がメインチェックに応答した直後の入力を意味し、スクリプト(' div.task'タグ内)で作成した人はこれは問題です。 –

関連する問題