tritims tritims - 1 month ago 15
AngularJS Question

All checkboxes getting checked even if one is checked

I'm making a basic todo app in angularjs.
Here's the code that's used to create a new todo with a checkbox

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


The problem is that all the checkboxes get checked even when I check just one

Here's my controller module

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
ng-model = "i.done"

should solve the problem. In your version ng-model = "todo.done" todo is an array and angular just creates a property on the fly, when it's used for the first time. This way all of your checkboxes are connected to this property, that's why checking one checkbox affects all of them.