all the checkboxes are getting checked on clicking a single checkbox

Question

i have a list of checkboxes in my angularjs code. when i click a checkbox, all the checkboxes get activated. How can i check only a single checkbox?

here is my code

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="namesCtrl">

<p>Type a letter in the input field:</p>
<form action="">
<p><input type="checkbox" ng-model="alpha" value="a">a</p>
<p><input type="checkbox" ng-model="alpha" value="b">b</p>
<p><input type="checkbox" ng-model="alpha" value="c">c</p>
<p><input type="checkbox" ng-model="alpha" value="d">d</p>
<p><input type="checkbox" ng-model="alpha" value="e">e</p>
<p><input type="checkbox" ng-model="alpha" value="f">f</p>
</form>
<ul>
  <li ng-repeat="x in names | filter:alpha">
    {{ x }}
  </li>
</ul>

</div>

<script>
angular.module('myApp', []).controller('namesCtrl', function($scope) {
    $scope.names = [
        'Jani',
        'Carl',
        'Margareth',
        'Hege',
        'Joe',
        'Gustav',
        'Birgit',
        'Mary',
        'Kai'
    ];
});
</script>

<p>The list will only consists of names matching the filter.</p>


</body>
</html>

the code is working fine when i use radio buttons.. this is the problem i'm facing

score 0 · Accepted Answer · edited May 23 '17 at 11:50

0

Your checkboxes need to have different values for ng-model. ng-model is what binds your view to your scope. So in your case, when you set one checkbox to true, all the others with the same ng-model value will be updated to true. This is the magic of Angular's two-way data binding.

See this post for more info on ng-model.

edited May 23 '17 at 11:50

Community

1
1

answered Feb 25 '16 at 12:22

LJ.Wizard

605
1
6
10

if i give different values to ng-model, how vl
this work?? i want to filter the list based on the values of checkboxes basically the prog is all about filtering

Pooja nagaraj rao

Feb 25 '16 at 12:32

Have a look at this [jsfiddle](http://jsfiddle.net/65Pyj/) and tell me if it helps you. – LJ.Wizard Feb 25 '16 at 12:38

yup.. it helpedme.. thanxalot :) – Pooja nagaraj rao Feb 26 '16 at 05:40

score 0 · Answer 2 · answered Feb 25 '16 at 12:39

0

I don't get your logic. You said

<p>Type a letter in the input field:</p>

and

basically the prog is all about filtering

But you're using checkboxes. Idealy, you should replace all your checkboxes with

<input type="text" ng-model="alpha"/>

Right ?

answered Feb 25 '16 at 12:39

Sherlocked Nguyen

594
3
8

i'm srry.. initialli i had used a textbox, i forgot to edit tat wen i wanted to use checkbox – Pooja nagaraj rao Feb 25 '16 at 12:56

all the checkboxes are getting checked on clicking a single checkbox

2 Answers2