<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.
Related
I am trying to implement a radio group in a list of items. I am unable to set the radion button checked based on the value. Please guide me.
HTML
<div *ngFor="let item of data; let i = index">
<nb-radio-group class="p-3 d-inline-flex">
<nb-radio [checked]="item.data.v === true">open</nb-radio>
<nb-radio [checked]="item.data.v === false">close</nb-radio>
</nb-radio-group>
</div>
only the radio button in last item of an array shows wether the radio button is checked or not. others does not bind data properly.
Please consider using the value property
<nb-radio-group class="p-3 d-inline-flex" [(value)]="item.data.v">
<nb-radio [value]="true">open</nb-radio>
<nb-radio [value]="false">close</nb-radio>
</nb-radio-group>
you should use a *ngswitch to display your opion then based on if the user click or not you will bind data see this example using checkbox and also item.data,v should be a boolean
enter code here
<td><input type="checkbox" [(ngModel)]="item.done" /></td>
<td [ngSwitch]="item.done">
<span *ngSwitchCase="true">
Yes
</span>
<span *ngSwitchDefault>
No
</span>
</td>
and also u should use a filter to return data based on true or false
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>
So I created a select all checkbox to select and deselect my list.
Everything works great but when I remove the list it also removes the select all checkbox.
Please tell me what am I doing wrong.
Here is the code:
HTML:
<div class="item-list">
<H2>Shopping List</H2>
<ul class="check-list">
<li><input type="checkbox" id="select-all"/>Select All</li>
</ul>
</div>
jQuery:
$(document).ready(function(){
$(".add-btn").click(function (){
var addItem = $('#item-add').val();
$(".check-list").append('<li ><input type="checkbox" class="check-box">' + addItem + '</li>');
});
$('#select-all').change(function(){
$('.check-box').prop('checked', $(this).prop('checked'));
});
$(".rem-btn").click(function(){
$(".check-list input:checked").parent().remove();
});
});
If you want to exclude select-all checkbox when you want to perform the remove operation. $.fn.not() can be used to exclude the checkbox from $(".check-list input:checked") elements.
Remove elements from the set of matched elements.
use
$(".check-list input:checked").not('#select-all').parent().remove();
OR, :not selector can also be used
Selects all elements that do not match the given selector.
$(".check-list input:checked:not(#select-all)").parent().remove();
You remove everything from the check-list where your select-all checkbox also resides. While Satpals solution should work, I think it's semantically better to have the Select-All checkbox placed outside the check-list.
<div class="item-list">
<H2>Shopping List</H2>
<input type="checkbox" id="select-all"/> <label for="select-all">Select All</label>
<ul class="check-list"></ul>
</div>
You should not need any script changes and there is no need to complicate the selector with exclusions for such a basic task.
We have input text to be shown with pre filled values. We are using list using ng-repeat directive
<ul ng-repeat="post in postList>
<input type="text" ng-model="postid" nginit="postid='{{post.id}}'"></input>
</ul>
This question AngularJS - Value attribute on an input text box is ignored when there is a ng-model used? tells to how to prepopulate input text.
But somehow we are finding it difficult using inside dynamic list.
Can we do like this or there is any better approach?
When we this code we dont get any value in the text box but on checking in elements tab of developer console of chrome; we can see value is getting updated but not in the text box.
Why don't you just bind directly to post.id? If it has a value, it will bind it to the value property of the text box.
Also, make sure you are using correct markup (input tag) and using the correct directives (ng-init). And I'm pretty sure to do not want to repeat the ul tag, but the items inside of it.
<ul>
<li ng-repeat="post in postList">
<input type="text" ng-model="post.id"></input>
</li>
</ul>
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