<div ng-repeat="n in mysize"
<input type="checkbox" id="ckl_{{n.id}}" ng-model="n[id].checked"
ng-change="selectSizeEdit(p.size_arr,n.id)" ng-if="(p.size_arr.indexOf(n.id) > -1)" ng-checked="true">
</div>
In the above code the values inside p.size_arr in checkboxes will be checked. Bt i cant select new checkboxes other than in p.size_arr. Plz help me.
ng-model="n[id].checked" is probably wrong, could you try ng-model="n.checked"?
Related
I have this checkbox input that I want it to call a function when its clicked
<div class="checkbox theme-search-results-sidebar-section-checkbox-list-item">
<label class="icheck-label">
<input class="icheck" type="checkbox" onclick="system()">
<span class="icheck-title" >
system is good
</span>
</label>
</div>
I tried different methods the only way that I got it to work was by using the onclick on the span but that would not work if the box gets checked!
Can anyone help me with this?
I can't change the layout because I have a fixed HTML that is like this for a lot of checkboxes.
This appears to be working the way you describe it with a simple "system()" function. The problem may be in your system() function.
function system(){
console.log("inside system")
}
<div class="checkbox theme-search-results-sidebar-section-checkbox-list-item">
<label class="icheck-label">
<input class="icheck" type="checkbox" onclick="system()">
<span class="icheck-title" >
system is good
</span>
</label>
</div>
Try this. First select the check box in JavaScript:
const $checkbox = document.querySelector('.icheck');
Then add a click event listener to it:
$checkbox.addEventListener('click', system);
This will run system when it is clicked.
I have a website and I have a search form with some options. You can view it here: https://www.travelstuff.be/search/. Because it's in Dutch, I will guide you through.
When you look at the left side of the page, you see 2 lists with blue squares ('Type' en 'Merk' ('Merk' is dutch for 'Brand').
The problem is with the 'Merk'-list. It will get quite long. For now, only 12 checkboxes are shown, but when I add more brands, the list will get longer (obviously).
I want to create a little snippet in JavaScript, that only shows the first 5 (or 10) checkboxes + a button below. When the button is clicked on, all the checkboxes are shown.
I use Twig to render the layout, and it renders it like this:
<div class="filter">
<div class="title">Merk</div>
<label><input type="checkbox" name="..." class="..." />...</label>
<label><input type="checkbox" name="..." class="..." />...</label>
<label><input type="checkbox" name="..." class="..." />...</label>
<label><input type="checkbox" name="..." class="..." />...</label>
<label><input type="checkbox" name="..." class="..." />...</label>
...
</div>
It's technically impossible to wrap the first 5 labels in another div (due to the limitations of Twig). Is there another way to do this? I really have no clue how to search for a problem like this, I think a solution is on here somewhere, but I have no idea where to look for it. English is not my native language.
Thanks in advance!
Edit
This is my 'solution'.
$('.filter').each(function(){
var self = $(this);
var labels = self.find('label');
var labelsSelected = self.find('label[data-selected="true"]').length;
if(labelsSelected == 0){
self.find('label:gt(4)').hide();
var $a = $('<a href="#" />').html('Meer').appendTo(self);
$a.on('click', function(e){
e.preventDefault();
self.find('label').show();
$(this).remove();
});
};
});
First of all, I loop over each filter. I get all the labels in it, and I check if any checkboxes are selected. If so, all the labels must be shown. If not, only the 5 first labels must be shown.
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?
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
repeat to show the checkbox with box as checked if value is true and unchecked if it is false. My code is
<tr ng-repeat="aa in allcheckboxes">
<input type="checkbox" ng-model="item.sticky" ng-show="{{aa.allowoption}}">
</div>
</tr>
I tried to do it using ng-show it didnt work. Can you please tell me how I can show the checkbox checked for when aa.allowoption is true and unchecked for flase.
Thanks
I believe you are looking for ng-checked:
<INPUT ng-checked="{{aa.allowoption}}">
Happy coding :)
You can use either ng-checked or ng-true-value http://jsfiddle.net/eCJ47/
<input type="checkbox" ng-model="a.type" ng-true-value="a">
Here's the doc for this http://docs.angularjs.org/api/ng.directive:input.checkbox