すべてチェックボックスがチェックされてもチェックされています

Question

私はangularjsで基本的なtodoアプリケーションを作っています。 ここでチェックボックス

<div class="container" ng-controller = 'controller' > 

    <h3>Enter Todo </h3> <input type="text" ng-model = 'new'> 
    <button ng-click = 'add();' ng-disabled="status();">Add</button> 

    <div ng-repeat = "i in todo" > 
     <input type="checkbox" ng-model = "todo.done" /> <label>{{i.name}}</label> 
    </div> 

</div> 

で新しいTODOを作成するのに使われているコードの問題は、私はちょうど1

をチェックしても、すべてのチェックボックスにチェックを受けるということであるここに私のコントローラモジュールが

todoApp.controller('controller',['$scope',function($scope){ 
$scope.new = ''; 
$scope.todo = []; 

$scope.add = function(){ 
    $scope.todo.push({name : $scope.new, done: false}); 
    console.log($scope.todo); 
    $scope.new = ''; 
}; 

$scope.status = function(){ 
    return !(/\S+/.test($scope.new)); 
}; 

Answer 1

ng-model = "i.done" 

は、問題を解決する必要があります。あなたのバージョンでは、ng-model = "todo.done"todoは配列であり、最初に使用されたときにただちにプロパティが作成されます。このようにして、すべてのチェックボックスがこのプロパティに接続されます。そのため、1つのチェックボックスをオンにするとすべてのチェックボックスに影響します。

Answer 2

だです

チェックボックスのリストが同じモデルを共有しているためです。カスタムディレクティブを作成することも、checklist-modelディレクティブを使用することもできます。

デモURL： https://vitalets.github.io/checklist-model/