checkbox limitation with ng-model in angularjs - javascript

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

Related

Model not change. multiple ng-repeat and checkbox in last of them.

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.

ng-checked event for checkbox in AngularJS

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>

Getting radio button selected value

How can I get the radio button clicked value?
Actually I need a custom filter for gender which I selected in my <form>. From the output I need to filter with gender. My filter and orderBy in ng-repeat is not working properly.
Here is a link to my Plunker example: http://plnkr.co/edit/7ZBcMDrJzSreD73R9aNq?p=preview
for(var i=0;i<$scope.details.length;i++) {
if($scope.details[i]===$scope.options[i])
$scope.details=myService.getForm($scope.user);
}
In your Plunker given the value from the Gender is getting within the $scope.user
$scope.submitTheForm=function(){
myService.setForm($scope.user);
$scope.user={};
};
Check this Working Demo
I'm not sure about your jsfiddle but here is a quick example of how you do it:
<div class="radio" data-ng-repeat="detail in details">
<label>
<input type="radio" data-ng-model="$parent.ngModel" name="ngModel" value="{{detail.id}}" required />
{{detail.title}}
</label>
</div>
in your controller just use $scope.ngModel and you will get the result.

conditional ngClass doesn't work in my case

<li ng-class="{selected: 'checked==true'}" ng-repeat="item in data">
<span>item.name</span>
<input ng-model="checked"/>
</li>
I want to add class 'selected' if the checkbox is checked. But the above code added the selected class before I click on the checkbox, what's wrong?
Well, in the question, you have mentioned that your input is a checkbox. If you miss type for input, it treats it as a text input.
So, your input should be like this.
<input type="checkbox" ng-model="checked"/>
Now, if you use a ng-model for checkbox, corrosponding variable which is checked here, can only hold true or false, both are boolean. So, you dont need to compare them in ng-class.
Only
<li ng-class="{selected: checked}" ng-repeat="item in data">
would suffice.
Here is the plunker I created for you.

How to use an object as ng-value of a radio button?

Is there any way to use an object for ng-value of a radio button?
Imagine you have a radio button whose ng-model is an object, like this:
modelObject: {val:'', text:''}
And this would be the radio button:
<input type="radio" ng-model="data.modelObject" ng-value=""/>
Is there a way to do something like the following (obviously it doesn't work)
<input type="radio" model="data.modelObject" ng-value="val:option.id, text:option.text"/>
?
Thanks
I know I can use the ng-change directive. I'm just wondering if what I am asking it's possible, it would be very smart
EDIT:
as requested in the comments, I am giving a bit of extra info on my setup.
I want to save in the model both the value of the button and its label. So let's say I have an array in my controller called impactOptions and a ng-repeat directive to create the buttons:
<div ng-repeat="option in impactOptions" >
<input type="radio" ng-model="data.modelObject.val" id="rbGroup{{option.id}} ng-value="option.id"/>
<label for="rbGroup{{option.id}}">{{option.text}}</label>
</div>
The problem with this setup is that in that way I'm only saving the value of the button, while I would like to also save it's label. I really need it later.
I'm looking for a way to do something like this
<input type="radio" model="data.modelObject" ng-value="val:option.id, text:option.text"/>
You can have an object as the value in ng-value:
<div ng-app>
<input type="radio" ng-model="modelObject" ng-value="{val:1, text:'text'}"/>
<p>>{{modelObject|json}}<</p>
</div>
example fiddle
The values in ng-value can also be dynamic as well per request:
<div ng-app ng-init="opt={id: 1, text: 'some text'}">
<input type="radio" ng-model="modelObject" ng-value="{val:opt.id, text:opt.text}"/>
<p>>{{modelObject|json}}<</p>
</div>
updated example fiddle
You can use ng-value="option":
<input type="radio" model="data.modelObject" ng-value="option"/>
When you need id you can have it from $scope.option.id and when you need text you can access it from $scope.option.text. Check my answer here. Does this work for your case?

Categories

Resources