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>
Related
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
So I found out that if I use <textarea placeholder="Write something.."></textarea> inside ng-repeat, the placeholder of the textarea only shows on focus.
If I remove the ng-repeat of my parent element then my placeholder appears on page load.
Same result if I use something like <textarea name="{{repeat.id}}">
text inputs are working fine.
I'm using angularJS 1.3.0-beta.17 and ui-bootstrap-tpls-0.11.0
Any information on that?
Update:
I found out that if I set a ng-model, then the placeholder shows correctly.
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
What I'm trying to do is make a number of dynamic radio/checkbox fields based on data that is passed to me. Unfortunately I don't have control over the format of this data but it should be ok to get the job done.
This is as far as I have got: http://plnkr.co/edit/LKwueHUzSrC5JpeBY9So
The format of the data I need to end up with in the end is a simple array like this:
"school_type": [
"Government/State",
"International",
"Co-educational"
]
This data could come from a radio box, or a checkbox if it's selected. Checkboxes are displayed if there is only one option, radios if more than one.
So I can get the fields displaying, but the issues I have are:
The name properties on the radio buttons don't seem to work for
each set.
I can't work out how to get the value of the checkbox/radio selected... back to the controller and into the array I need. I thought the easiest way would be to use the ng-change property available and pass a function to this but I keep getting errors every way I try.
Any help would be appreciated.
There's a couple of problems with your code:
You're not using interpolation where it is needed;
You're not binding the controls to the scope;
Here's your updated code:
<label ng-switch-when="r" class="radio">
<div ng-repeat="option in options">
<input type="radio" name="{{fieldname}}" ng-model="$parent.$parent.selectedid" value="{{option}}">
<span>{{ option }}</span>
</div>
</label>
<label ng-switch-when="c" class="checkbox">
<input type="checkbox" name="{{fieldname}}" ng-false-value="" ng-true-value="{{options[0]}}" ng-model="$parent.selectedid">
<span>{{ options[0] }}</span>
</label>
Note that in order to bind the controls correctly I had to use $parent.$parent for the radio buttons and $parent for the checkbox. That was needed because both ng-switch and ng-repeatcreate new child scopes. So I had to go up one level for the checkbox and two ones for the radio buttons. That could be avoided if you used an object instead of primitives for the bindings. I suggest that you try to refactor your code so it does that. This article has more information on that matter.
And finally, here's a working version of your Plunker.
I am trying to set up a form, with some radio buttons and a textarea for custom input. If I select custom input, and start typing it loses the radio selection and I must select the custom input again when I am done typing
http://jsbin.com/AMAniXu/2/edit
How can I ensure that selecting the radio next to the textarea and providing custom input maintains user selection?
Use a different model object other than the object used in the ng-value of the checkbox
<input type="radio" data-ng-model="selectedEntry" data-ng-value="newText">
<textarea rows="4" cols="40" data-ng-model="newTextInput"></textarea>
And then you can grab the value in the model newTextInput when you click the submit button if the third one is selected.
DEMO