I was trying to use checkbox and bind the checked attribute using ng-checked attribute but its not working where as its working fine with ng-model attribute with checkbox type inputs.
<!-- not working -->
<input type="checkbox" name="checkedBox"
id="checkedBox11"
ng-checked="isChecked">
<!--working-->
<input type="checkbox" name="checkedBox"
id="checkedBox21"
ng-model="isChecked">
I have created a jsbin to demonstrate the same:
here
Since you are not connecting the checkbox with a model in the first case, it is not getting changed in angular and hence the value is not changing in the view also.
However,in the second case, you have attached the isChecked to the checkbox, the changes are reflecting.
Update: If you change the default value of isChecked to true, it shows true and the checkbox is also checked on load.
Changing the first input to have model, changes it. You could also use ng-click to change the value. (addming ng-model="isChecked")
<input ng-model="isChecked" type="checkbox" name="checkedBox" id="checkedBox11" ng-checked="isChecked">
Or you could add ng-click="isChecked=!isChecked"
to the checkbox
Related
I Have used below line of code for multi selection. I am trying to multiselect on one entity but as soon as the scope is passed on to the next entity, the elements that I have selected in first entity gets unselected-
enter image description here
This is working fine on previous versions of chrome but not in 95.0
This is breaking because you're setting ng-model to the same property that ng-options is using. So the moment you select something, abcDTO.SelectionTypes gets reset to whatever you selected. ng-options and ng-model should never be set to the same property. Has nothing to do with the Chrome version.
Here's an example of it working once you change ng-model to something else.
<select
multiple="multiple" ng-multiple="true" rows="10" size="4"
ng-model="abcDTO.Selection"
ng-options="x.SelectionID as x.SelectionDesc for x in abcDTO.SelectionTypes">
</select>
My ng-repeat input fields are dynamic fields, if checkbox checked the ng-repeat input fields are displaying, ADD More button also enabled. If i click the ADD More button same set of input fields are displaying, i need to validate my ng-repeat input fields at the time of checkbox status will be true (checked) using ng-required / required option.
Kindly give me a solution using ng-required = "true" / required.
Thank you.
most probably you need to set the name on each checkbox
something like
<div your ng-repeat>
<input type="checkbox" name="chk{{$index}}" ng-model="yourmodel" ng-required="true" />
</div>
I have a checkbox that is updated from the model, but then the model is not updated clicking the checkbox.
Within a form I have:
<input type="checkbox" ng-model="acceptEula"> I have read the EULA and I agree
<button type="submit" ng-click="pay()" translate>Proceed to Pay</button>
{{acceptEula}}
Clicking the checkbox, I can see how {{acceptEula}} shows true or false, it works.
When I click the button, I put a breakdown in pay() function. $scope.acceptEula is always false. What could be the problem?
Sorry, the question was not detailed in order to simplify the problem. In reality, I used "ng-switch" in the form.
Finally I have found the problem: "This is a scope inheritance problem due to ng-switch creating it's own scope.". It is well explained at angularjs - ng-switch does not bind ng-model
The solution is to use dot in the model, for example $scope.form.acceptEula
how to get value of checkbox when checked? My problem is I alrdy had a ng-model for other stuff in my <input>
http://plnkr.co/edit/wyTRa8FVkGaEPX6BgYXb?p=preview
I want to collect the data so that when user clicked submit, I can get the value of checked checkbox.
You need to use ng-model and ng-true-value to track what you have selected.
Declare an array to track values
$scope.selectedValues=[];
Then use the following bindings
<input ng-show="showC || checked" type="checkbox" id="{{$index}}" ng-model='selectedValues[$index]' ng-true-value='{{item.name}}'>
See my updated plunkr http://plnkr.co/edit/KWh5CzZa3OcqKjjhocDz?p=preview
I reference the document here: ng-checked
Here, at the example provided at the bottom of the page, you can see that clicking on the first checkbox also checks the second box.
The behaviour that I find with this is that even when the first checkbox is checked, the second checkbox can be unchecked - that is, after checking the first checkbox (the Master checkbox), the second checkbox gets checked automatically. If you now try to uncheck the second checkbox, it works which I find strange. The ng-checked directive is bound to the master model which is still true.
Why then is it possible to uncheck the second box? Shouldn't the ng-checked ensure that the checked state is always in sync with the expression - that is, shouldn't the ng-checked NOT allow the second checkbox to be unchecked as long as the first checkbox is still checked?
How does one manage to keep the second box checked as long as the master checkbox is checked?
Reference Code:
Check me to check both: <input type="checkbox" ng-model="master">
<br/>
<!-- Expecting the following input to be checked as long as the master checkbox
is checked / User should not be able to uncheck this as long as master
is checked -->
<input id="checkSlave" type="checkbox" ng-checked="master">
The ng-checked directive likely (I didn't examine the Angular source code) sets up a $watch on the master property. Only when that property changes will the $watch fire. So when you change the slave checkbox, the $watch doesn't fire, so the change happens.
If you want to keep the second checkbox in sync with the first, add an ng-model to the slave,
<input type="checkbox" ng-model="slave" ng-checked="master">
then force a sync anytime either model changes:
$scope.$watch(
function() { return $scope.master + $scope.slave; }
,function() { $scope.slave = $scope.master; }
);
Fiddle
Note that this will also work:
$scope.$watch('master + slave', function() {
$scope.slave = $scope.master;
});