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
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>
<select ng-model="model.typeId" ng-show="AllowToChangeType(model)"
ng-options="item.value as item.text for item in model.types">
</select>
The issue is that when the user clicks Save button, the form is regenerated to non-editable mode, AllowToChangeType() returns false, and as this <select> becomes hidden, model.typeId gets set to null. Then, if the user clicks on Edit again, this <select> is regenerated, but nothing is selected in it, although the data has been saved correctly. Ideally, the <select> should show the saved value. How to solve this issue?
I think you are making some incorrect assumptions. ng-show does not remove the model value when the element is hidden, as this plunker proves: https://plnkr.co/edit/knnLRZcHdQukGawU8iyJ?p=preview
ng-show/ng-hide do not regenerate DOM elements, they simply change visibility property
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 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
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;
});