I am trying to display a list of users. I need to use disabled filled inputs with first name, last name, email and a last attribute with radio buttons.
I can easily display the list of name and email but I did not succeed display the good checked button. I tried to use the ng-init directive but this is not working
<div ng-repeat="user in displayUsers" class="text-black form-inline">
<input type="text" value="{{user.nom}}" class="form-control" disabled>
<input type="text" value="{{user.prenom}}" class="form-control" disabled>
<input type="text" value="{{user.email}}" class="form-control" disabled>
<span ng-init="response={{user.response}}">
<input type="radio" class="radio-inline" name="" value="1" ng-model="response" disabled>En attente
<input type="radio" class="radio-inline"name="" value="2" ng-model="response" disabled>Oui
<input type="radio" class="radio-inline" name="" value="3" ng-model="response" disabled>Non
</span>
</div>
That is not what ngInit is for, nor is ngInit necessary. ngModel is in use and it should be in control of whether the radio button is checked or not. Just make sure the model value always has an appropriate value. If the model value is not a simple string, you can use ngValue to specify which model value should result in the radio button being checked.
<span>
<input type="radio" class="radio-inline" name="" ng-value="1" ng-model="user.response" disabled>En attente
<input type="radio" class="radio-inline"name="" ng-value="2" ng-model="user.response" disabled>Oui
<input type="radio" class="radio-inline" name="" ng-value="3" ng-model="user.response" disabled>Non
</span>
Related
I have one div which contains multiple types of input types. i.e., text, radio, checkbox...
I want to make the div mandatory. That means If I check the radio or check box or enter a value into the text field the mandatory condition satisfies. i.e, selecting any one of them satisfies the condition. If all are left without any value I must display angular messages(ng-messages) below the div.
This code is generated dynamically from Javascript. So validations should be done when I submit the form.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<div id="div1"><!--This div is mandatory-->
<input type="checkbox" name="div1" value="SomeValue" ng-model="vm.check1">Some<br/>
<input type="checkbox" name="div1" value="SomeValue2" ng-model="vm.check2">Some2<br/>
<input type="radio" name="div1" value="Male">Male<br/>
<input type="radio" name="div1" value="Female">Female<br/>
<input type="text" name="div1" ng-model="text1"><br/>
</div>
<div></div><!--Should display ng-messages here if none of the above selected.-->
<br/><br/>
<div id="div2"><!--This div is mandatory-->
<input type="checkbox" name="div2" value="SomeValue" ng-model="vm.check3">Some<br/>
<input type="checkbox" name="div2" value="SomeValue2" ng-model="vm.check4">Some2<br/>
</div>
<div></div><!--Should display ng-messages here if none of the above selected.-->
is there any possibility to achieve this?
Yes, you could do that just by wrapping all group of input fields under fieldset and then apply required attribute over that fieldset.
Make sure name attribute of each field should be different in order to consider each field as different. It can be same name for gender radio button.
<!--Below field input fields are mandatory now-->
<fieldset id="div1" required="">
<input type="checkbox" name="check1" value="SomeValue" ng-model="vm.check1">Some<br/>
<input type="checkbox" name="check2" value="SomeValue2" ng-model="vm.check2">Some2<br/>
<input type="radio" name="gender" value="Male">Male<br/>
<input type="radio" name="gender" value="Female">Female<br/>
<input type="text" name="text1" ng-model="text1"><br/>
</fieldset>
I am trying to implement radio button group validation inside angular's ng-repeat.
HTML
<div ng-repeat="driver in drivers">
<input required type="radio" value="M" name="driverGender" ng-model="driver.gender">
<input required type="radio" value="F" name="driverGender" ng-model="driver.gender">
</div>
Name attribute should change in each repeat. I tried appending $index value, but it's not working properly when drivers are dynamically added and removed. What is the best way to implement this?
In your code all radio buttons will relate with each other, because name attribute of all is the same. You should identify each radio buttons group. For example:
<div ng-repeat="driver in drivers">
<input required type="radio" value="M" name="driverGender[{{driver.id}}]" ng-model="driver.gender">
<input required type="radio" value="F" name="driverGender[{{driver.id}}]" ng-model="driver.gender">
</div>
Just try this If you need like below
Think their is two repeats in model, then code of the view should be like this
<div ng-repeat="driver in drivers" class="ng-scope">
<input required="" type="radio" value="M" name="driverGender0" ng-model="driver.gender"/>
<input required="" type="radio" value="F" name="driverGender0" ngmodel="driver.gender">
</div>
<div ng-repeat="driver in drivers" class="ng-scope">
<input required="" type="radio" value="M" name="driverGender1" ng-model="driver.gender"/>
<input required="" type="radio" value="F" name="driverGender1" ngmodel="driver.gender"/>
</div>
So this is the code for get this
<div ng-repeat="driver in drivers">
<input required type="radio" value="M" name="driverGender{{$index}}" ng-model="driver.gender">
<input required type="radio" value="F" name="driverGender{{$index}}" ngmodel="driver.gender">
</div>
you can change name attribute based on index value , can you check out my answer in following link
In controller
$scope.drivers = [{id:1,name:'test',gender:'M'}];
In html
<div ng-repeat="driver in drivers">
<input required type="radio" value="M" name="driverGender{{$index}}" ng-model="driver.gender">
<input required type="radio" value="F" name="driverGender{{$index}}" ng-model="driver.gender">
</div>
https://plnkr.co/edit/byLRBhUI2Ezc5CofHnPC?p=preview
Finally I found one solution.
<div ng-repeat="driver in drivers">
<div ng-form="radioForm">
<input required type="radio" value="M" name="driverGender{{$index}}" ng-model="driver.gender">
<input required type="radio" value="F" name="driverGender{{$index}}" ngmodel="driver.gender">
{{radioForm.$error}}
</div>
</div>
Now the validation in happening thorugh the ng-form. Radio buttons will be grouped because $index.
I have multiple input elements and I want one ng-model for them all, but when I use the model with ng-show it is not that sensitive , so how can I go .
<form ng-model="yes">
<input type="checkbox">1</input>
<input type="checkbox">2</input>
<input type="checkbox">3</input>
</form>
i.e I have multiple checkboxes and I want them all ticked to show another element
What do you mean with "sensitive"?
This should work if you want to set boolean properties:
<form name="myForm">
<input ng-model="myModel.prop1" type="checkbox" value="1">
<input ng-model="myModel.prop2" type="checkbox" value="1">
<input ng-model="myModel.prop3" type="checkbox" value="1">
</form>
But if you mean different options for one model you have to use radio buttons:
<form name="myForm">
<input ng-model="myModel.prop1" type="radio" value="1">
<input ng-model="myModel.prop1" type="radio" value="2">
<input ng-model="myModel.prop1" type="radio" value="3">
</form>
You can debug your model by putting {{myModel}} somewhere in the source code, so you will see immediately the effect of your changes
<form name="myForm">
<input ng-model="myModel1" type="checkbox">Option A <br/>
<input ng-model="myModel2" type="checkbox">Option B <br/>
<input ng-model="myModel3" type="checkbox">Option C <br/>
<div ng-show="(myModel1 && myModel2 && myModel3)">ABC</div>
</form>
Demo
I am using using two ON/OFF switches in my program.When one switch is ON another switch will automatically OFF(vice versa).using angular, give me your suggestion.
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch">
<label class="onoffswitch-label" for="myonoffswitch">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch">
<label class="onoffswitch-label" for="myonoffswitch">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
yes it's possible with angular.
- save checkbox state to ng-model
- set selected state according to the model
- you can use a combination of ngTrueValue and ng-model like this
- utilise ng-init to set the initial value of the element
<input type="checkbox" name="someName" value="0" ng-model="someValue" ng-true-value="0" ng-init="someValue=0">
<input type="checkbox" name="someName" value="1" ng-model="someValue" ng-true-value="1">
this will swap the checked state between the two checkboxes.
do message me if I've misunderstood your intention.
I have HTML code:
<input type="text" ng-model="name" required>
<input type="text" ng-model="sec_name" required>
<h2>Check if you dont want enter full name</h2>
<input type="checkbox" ng-model="none">
How I can remove required attribute if user checked input type="checkbox"?
And to come back if unchecked?
It needs for ng-disabled:
<div ng-disabled="form.$invalid">Send form</div>
You can use ng-required, instead of required, so you could set a model on the checkbox for example like
<input type="text" ng-model="name" ng-required="!none">
<input type="text" ng-model="sec_name" ng-required="!none">
<h2>Check if you dont want enter full name</h2>
<input type="checkbox" ng-model="none">
Here is a working example for you - http://jsfiddle.net/U3pVM/16544/
Use ng-required instead:
<input type="text" ng-model="sec_name" ng-required="none">
That's exactly why ng-required exists.