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.
Related
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>
In the example above, the radio buttons below the checkbox are activated when the checkbox is checked. I'd like to reset the radio buttons (so that no radio button is filled) when unchecking this checkbox.
<div class="checkbox checkbox-info">
<input id="icb" type="checkbox" ng-model="checked">
<label for="icb"><i class="fa fa-refresh"> </i><b>Integratie</b></label>
</div>
<div class="radio">
<input type="radio" name="irb" id="iarb" ng-disabled="!checked" value="!checked">
<label for="iarb">Administrator</label>
</div>
<div class="radio">
<input type="radio" name="irb" id="imrb" ng-disabled="!checked" value="!checked">
<label for="imrb">Medewerker</label>
</div>
Change radio button value to ng-model
HTML
<div class="checkbox checkbox-info">
<input id="icb" type="checkbox" ng-model="checked" ng-click="onCheck()">
<label for="icb"><i class="fa fa-refresh"> </i><b>Integratie</b></label>
</div>
<div class="radio">
<input type="radio" name="irb" id="imrb" ng-model="radio_checked" value="1" ng-disabled="!checked" />
<label for="iarb">Administrator</label>
</div>
<div class="radio">
<input type="radio" name="irb" id="imrb" ng-model="radio_checked" value="2" ng-disabled="!checked" />
<label for="imrb">Medewerker</label>
</div>
JS
$scope.onCheck = function(){
$scope.radio_checked = false;
}
Demo Fiddle
I am trying to iterate over array of questions. But I need to attach radio button answers to each question.
In this case I need to add different ng-models for each answer.
I tried the code below but it didn't work.
Is this the correct way of using $index of the ng-repeat?
<li class="fields" ng-repeat="question in questions">
<p>question:{{question.title}}</p>
<div class="radio-buttons">
<input type="radio" id="radio01" value="0" ng-model="answer[$index]" checked="checked"/>
<label for="radio01"><span></span>Yes</label>
<input type="radio" id="radio02" value="1" ng-model="answer[$index]"/>
<label for="radio02"><span></span>No</label>
</div>
</li>
you need to do it like this modelname{{$index}}
<li class="fields" ng-repeat="question in questions">
<p>question:{{question.title}}</p>
<div class="radio-buttons">
<input type="radio" id="radio01" value="0" ng-model="answer{{$index}}" checked="checked"/>
<label for="radio01"><span></span>Yes</label>
<input type="radio" id="radio02" value="1" ng-model="answer{{$index}}"/>
<label for="radio02"><span></span>No</label>
</div>
</li>
You can also do it via square bracket notation too if that pleases you aesthetically more:
<li class="fields" ng-repeat="(i, question) in questions">
<p>question:{{question.title}}</p>
<div class="radio-buttons">
<input type="radio" id="radio01" value="0" ng-model="answer[i]" checked="checked"/>
<label for="radio01"><span></span>Yes</label>
<input type="radio" id="radio02" value="1" ng-model="answer[i]"/>
<label for="radio02"><span></span>No</label>
</div>
</li>
Also to note, models are better when expressed as dot models. So for example:
<input type="radio" ng-model="answer[i]" />
Would be better as:
<input type="radio" ng-model="models.answer[i]" />
Then in your controller this makes it simple to list all the models via the object 'models', rather than finding out how many answer[i] models there are.
Hi when the switch is off then the lable should be gray color like lable should disable , if on then lable should enable Using angular
Here fiddle:http://jsfiddle.net/dgj7s5sk/8/
<label>check1</label>
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch"
checked="checked" />
<label class="onoffswitch-label" for="myonoffswitch"> <span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
<label>check2</label>
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch2" />
<label class="onoffswitch-label" for="myonoffswitch2"> <span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
Please me in this issue. Thanks
Here's the updated fiddle with solution.
In your example, you were not declaring your code as an angular app.
What I did:
Used Angular framework(See 1st dropsown on left under 'Frameworks & Extensions')
Declared as angular app. See <div ng-app> on 1st line.
Defined ng-model for both inputs switches.switch1 and switches.switch2.
Defined a new class for disabled label
.disabled-class {
color:gray;
}
Applied conditional class using ng-class
<label ng-class="(switches.switch1)?'':'disabled-class'">check1</label>
<label ng-class="(switches.switch2)?'':'disabled-class'">check2</label>
Hi here i have on off switch, if the switch is on TEXT should be normal black color, else TEXT should be red color, Some one help me out in this
FIDDLE:
http://jsfiddle.net/0o88p8xy/
**Html code**
<section>
<label>Award of excelence</label>
<div class="onoffswitch">
<input type="radio" id="radio1" name="radios" class="SwitchOn" value="all"
checked>
<label for="radio1"></label>
<input type="radio" id="radio2" name="radios" class="SwitchOff"
value="false">
<label for="radio2"></label>
</div>
</section>
<section>
<label>Innovation Index</label>
<div class="onoffswitch">
<input type="radio" id="radios21" name="radios2" class="SwitchOn" value="all"
checked>
<label for="radios21"></label>
<input type="radio" id="radios22" name="radios2" class="SwitchOff"
value="false">
<label for="radios22"></label>
</div>
</section>
Here are some leads :
Use the ngModel directive to bind your switches to a boolean property of the $scope(so you will need a controller for that).
Use the ngClass directive to reflect the value of that boolean property by having a variable class on the text element.