I am trying to use ng-checked for checkbox under ng-repeat.
<div class="listing" ng-repeat="item in list>
<input type="checkbox" class="favor" ng-checked='::isFavorite(item)' ng-click='setFavorite(item)'/>
</div>
There is one method, which I am calling on ng-checked event. But, if there are 50 checkboxes in the list (i.e. 50 items in ng-repeat), then each time the page is drawn, the same method gets called twice an item. Any help would be really appreciable.!!
It would be good if you declare JSON object in the controller for each item.
JS
list=[{name:'Item1',checked:true},{name:'Item2',checked:false}];
HTML
<div class="listing" ng-repeat="item in list>
<input type="checkbox" class="favor" ng-checked='item.checked' ng-click='setFavorite(item)'/> {{item.name}}
</div>
Related
I have a scenario in which I have to put values in array when the checkbox is checked in ng-repeat.
<li ng-repeat="player in team.players">
<div class="row">
<div class="col-md-3 m-t-xs">
<input type="checkbox" ng-model="vm.newEvent.players[$index].selected" ng-change="vm.selectPlayer($index, player)"> {{player.name}}
</div>
<div class="col-md-5 m-t-xs">
<label for="">
<input type="radio" name="{{player.id}}" ng-change="vm.disSelectPlayer($index, player)" ng-model="vm.newEvent.players[$index].casuality.type" value="injured"> Injured
</label>
<label for="">
<input type="radio" name="{{player.id}}" ng-change="vm.disSelectPlayer($index, player)" ng-model="vm.newEvent.players[$index].casuality.type" value="sick"> Sick
</label>
<label for="">
<input type="radio" name="{{player.id}}" ng-change="vm.disSelectPlayer($index, player)" ng-model="vm.newEvent.players[$index].casuality.type" value="other"> Other
</label>
</div>
</div>
</li>
This is how it looks now in browser.
The issue is that when I clicked any of the player name in FC Barcelona Accordion it also selects the same indexed player from FC Bayern Munich Accordion, What I want is to keep all players separate form each-other.
Am i missing something in the binding ??
Use checklist-model, AngularJS directive for list of checkboxes
In Angular one checkbox <input type="checkbox" ng-model="..."> is linked with one model. But in practice we usually want one model to store array of checked values from several checkboxes. Checklist-model solves that task without additional code in controller. You should play with attributes of <input type="checkbox"> tag:
set checklist-model instead of ng-model
set checklist-value - what should be picked as array item
Documentation
This Because of this function: vm.disSelectPlayer($index, player)
I think you have to add index here <li ng-repeat="player in team.players"> in order to give each player different id or index.
Try This :
<li ng-repeat="(key ,player) in team.players">
and use this Key in the function that you call :
vm.disSelectPlayer($index, player , key)
I hope it is useful :)
This is because on on line #4 you wrote
ng-model="vm.newEvent.players[$index].selected".
You have used parents object ie players, instead of this you can use
ng-model="vm.player.selected".
OR
ng-model="vm.team.players[$index].selected".
If I have multiple ng-repeat and checkbox in last of them, all checkboxes are checked if I push one of them. How to resolve the problem?
Example:
<div ng-repeat="(ctIndex, ct) in cts">
<div ng-repeat="cs in ct track by $index">
<!-- One checkbox: using ng-checked in place of ng-model -->
<div ng-repeat="(tId, task) in cs">
<input type="checkbox" id="taskChecked{{ctIndex}}_{{$index}}_{{tId}}" data-ng-change="checkTask(ctIndex, $index, tId)" name="task{{ctIndex}}_{{$index}}_{{tId}}" data-ng-model="task.selected">
</div>
</div>
</div>
Edit: Solved with #ManojLodhi's answer, but now I have another problem. The model doesn't change (true or false) to "task.selected"
All your checkboxes connect to the same property in your model:
data-ng-model="task.selected"
You need independent model properties for independent checkboxes.
I have a problem. In angular app I have three levels of ng-repeat and two checkboxes like:
<div ng-repeat="(ctIndex, ct) in cts">
<div ng-repeat="job in ct track by $index">
<input type="checkbox" id="job{{ctIndex}}_{{$index}}" data-ng-change="checkJob(ctIndex, $index)" name="job{{ctIndex}}_{{$index}}" data-ng-model="job.selected">
<div ng-repeat="(tId, task) in cs">
<input type="checkbox" id="taskChecked{{ctIndex}}_{{$index}}_{{tId}}" data-ng-change="checkTask(ctIndex, $index, tId)" name="task{{ctIndex}}_{{$index}}_{{tId}}" data-ng-model="task.selected">
</div>
</div>
</div>
When job.selected and task.selected are in checked status also are checked checkboxes and model of its counterparts in another ng-repeats.
If I use ng-checked without ng-model, selected vars doesn't change.
Can you help me? Thanks
I'm trying to get a list of questions (retrieved dynamically so we can't hard code them) and then using ng-repeat list them out with a three state checkbox next to each (true, false, null).
The code below works to show the questions with the correct checkboxes, however each time you click on 1 checkbox they all change as they are using the same ng-model (I assume).
How do I get around this?
Thanks
<div class="select-all-checkboxes" flex="100" ng-repeat="(guidCustomerId,item) in items" ng-if="item.type=='Mandatory'">
<span three-state-checkbox ng-model="idv.checkboxModelThree" ng-change="idv.checkBoxonChange()" ng-checked="exists(item, selected_mandatory)"></span>
<h8-red>{{item.question}}</h8-red>{{item.answer}}
<br /><br />
</div>
Can you try?
<div class="select-all-checkboxes" flex="100" ng-repeat="(guidCustomerId,item) in items" ng-if="item.type=='Mandatory'">
<span three-state-checkbox ng-model="item.value" ng-change="item.value = !item.value" ng-checked="exists(item, selected_mandatory)"></span>
<h8-red>{{item.question}}</h8-red>{{item.answer}}
<br /><br />
</div>
so far I've only seen people used ng-model to bind the state of checkbox. How can I know which checkbox is checked with angularjs? for example I want to get the index of the checked checkedbox so that I can do something on the backend.
If it were in jquery / js I can use function to catch the state of the checkbox and send the index or etc info to be send back to database.
my plunker : http://plnkr.co/edit/dG9cwswiVzLdjEnpSNvu?p=preview
You could use ng-click, like this:
http://plnkr.co/edit/kOTtbSHbw1kaGWmjqQbf?p=preview
I am not clear about your problem but if you want label which associate with checkbox then you should use ng-init.
<div ng-controller="main">
<div class="checkbox" ng-repeat="item in items">
<input type="checkbox" id="{{$index}}" ng-model="item.done"><label for="{{$index}}" class="done-{{item.done}}" ng-init="item.text='Label for' + item.val">Label for {{item.val}}</label>
</div>
{{items}}
</div>
See Demo