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.
Related
I'm trying to set some fields to dirty after a specific button is clicked.
template
<div class="col-md-4">
<label class="radio radio--inline">
<input type="radio" class="radio__control" name="radio_Role"ng-model="Form.RoleCheck" value="1" required>
<span class="radio__label">
Whatever
</span>
</label>
</div>
<button id="gotoPersonendatenVn" ng-click="dirty()" type="button">
Dirty
</button>
app.js
$scope.dirty = function(){
$scope.Form.RoleCheck.$setDirty();
}
I've tried different things but i always get "TypeError: $scope.Form.RoleCheck is undefined"
Firstly, check where you try to add $setDirty, you try add it to ngModel, not to the name="radio_Role"
And where is yours form
<form name="Form">
<input type="radio" class="radio__control" name="radio_Role" ng-model="modelName" value="1" required>
if you want set input as dirty
$scope.Form.radio_Role = false;
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 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'm trying to use radio buttons that shows different elements with ng-show, and i dont get it to set a default value in the model.
I've got the following example code (also fiddle).
<div ng-app>
<input type="radio" ng-model="input" name="input" value="a" />
<input type="radio" ng-model="input" name="input" value="b" />
<h2 ng-show="input == 'a'">A</h2>
<h2 ng-show="input == 'b'">B</h2>
</div>
I've tried with checked="checked" but it gets overdid by angular. ng-checked="true" gives that radiobutton propper check, but it doesnt set the model to 'a'.
I know it's possible to fix this in a controller but i want to do it completely without any javascript.
Use ng-init http://jsfiddle.net/ysxR9/2/
<div ng-app ng-init="input='a'">
<input type="radio" ng-model="input" name="input" value="a" /> A <br />
<input type="radio" ng-model="input" name="input" value="b" /> B <br />
<br />
<br />
<h2 ng-show="input == 'a'">A</h2>
<h2 ng-show="input == 'b'">B</h2>
</div>
Usually its usage is not quite recommended but in single cases it is fine to use it.
What ng-init does is to execute the given expression in the context of the current scope, i.e. $scope.$eval(expression); this means that you can put the directive wherever you want, just be aware of the target scope:
<div ng-app>
<input type="radio" ng-model="input" name="input" value="a" ng-init="input='a'" /> A <br />
<input type="radio" ng-model="input" name="input" value="b" /> B <br />
<br />
<br />
<h2 ng-show="input == 'a'">A</h2>
<h2 ng-show="input == 'b'">B</h2>
</div>