At first, all checkboxes are checked.
Then i'm just checking 2 of them and press search.
Checkboxes and Search-Button:
<input type="checkbox" id="stat2" ng-true-value="true" ng-false-value="false" ng-model="ts.status.check2" />
<label for="stat2">Status 2</label>
<br />
<input type="checkbox" id="stat3" ng-true-value="true" ng-false-value="false" ng-model="ts.status.check3" />
<label for="stat3">Status 3</label>
<br/>
<input type="checkbox" id="stat1" ng-true-value="true" ng-false-value="false" ng-model="ts.status.check1" />
<label for="stat1">Status 1</label>
<br />
<input type="checkbox" id="stat4" ng-true-value="true" ng-false-value="false" ng-model="ts.status.check4" />
<label for="stat4">Status 4</label>
<br />
And then a new page (new URL) is loading, on this page there is a 'back' button.
When i press the back button, i'm getting back to the first page, and alle 4 checkboxes are selected again, how can i make it possible, that only the ones are checked, which i checked first?
Back-Button
<div class="btn-group container panel-footer">
<button type="button" onClick="history.go(-1);return true;" class="btn">Back</button>
</div>
Use $rootScope for maintaining your data:
$rootScope.checkState = {
check1: true,
check2: false,
check3: true,
check4: false
};
And then in your view:
<input type="checkbox" id="stat2" ng-true-value="true" ng-false-value="false" ng-model="$root.checkState.check1" />
(Do this for all your checkboxes with the according field)
Related
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 a form that has a radio button group and the values are ng-value = true they are all their own entity on the model I have to work with and if a user selects one then changes their mind it still remain true. How can I make this false if deselected in an angular way?
I have a plnkr of the situation plunkr
<label class="radio-inline">
<input type="radio"
data-ng-value="true"
data-ng-model="vm.minorWorks.earthArTNS"
id="minorTns"
name="earthArrangements" />
<strong> TN-S</strong>
</label>
<label class="radio-inline">
<input type="radio"
data-ng-value="true"
data-ng-model="vm.minorWorks.earthArTNCS"
id="minorTncs"
name="earthArrangements" />
<strong>TN-C-S</strong>
</label>
<label class="radio-inline">
<input type="radio"
data-ng-value="true"
data-ng-model="vm.minorWorks.earthArTT"
id="minorTt"
name="earthArrangements" />
<strong>TT</strong>
</label>
<label class="radio-inline">
<input type="radio"
id="minorOther"
name="earthArrangements"
data-ng-value="true"
data-ng-model="vm.minorWorks.earthArOther"
data-ng-change="vm.minorWorks.earthArSpecify = vm.minorWorks.earthArOther ? vm.minorWorks.earthArSpecify : ''" />
<strong>OTHER</strong>
</label>
You could possibly add a function to the checkboxes, ng-click="checkState(model)"
and in .js
$scope.checkState = function(model){
if(model) { // if model = true
model = false; //set model to false
}
}
I am editing User Form. I send the data from controller to the edit view using $scope object for editing form. The data is look like this:
$scope.changeUser = [
{
id: 1,
username: 'Ramesh',
password: 'Ramesh1#23',
role: 'admin',
active: 'no'
}
];
<div class="form-group">
<label class="control-label col-md-3">Action</label>
<div class="col-md-4">
<div class="radio-list">
<label class="radio-inline">
<input type="radio" name="optionsRadios2" data-ng-model="changeUser.active" value="yes"/>
Yes
</label>
<label class="radio-inline">
<input type="radio" name="optionsRadios2" data-ng-model="changerUser.active" value="no"/>
No
</label>
</div>
</div>
</div>
When edit form get {{changeUser.action}} than, I have to checked the radio button accordingly. As like when action=='no' the radio button with name no should be automatically checked as we did using checked value=no in the html. I have to write the ng-if conditions seeing the action value.
You are missing the index of changeUser array in your ng-model.
<div class="form-group">
<label class="control-label col-md-3">Action</label>
<div class="col-md-4">
<div class="radio-list">
<label class="radio-inline">
<input type="radio" name="optionsRadios2" data-ng-model="changeUser[0].active" value="yes" />
Yes
</label>
<label class="radio-inline">
<input type="radio" name="optionsRadios2" data-ng-model="changeUser[0].active" value="no" />
No
</label>
</div>
</div>
</div>
See the Plnkr
I have a simple with two fields. Each field associated with two radio buttons.
I want to calculate the form progress..Markup of the form look like this
<fieldset>
<div>
<div class="btn-group">
<label class="radio-inline">
<input type="radio" name="radio" />
</label>
<label class="radio-inline">
<input type="radio" name="radio" />
</label>
</div>
<label for="FH1" class="radio-inline control-label">1st Option</label>
</div>
<br/>
<div>
<div class="btn-group">
<label class="radio-inline">
<input type="radio" name="radio" />
</label>
<label class="radio-inline">
<input type="radio" name="radio" />
</label>
</div>
<label for="FH1" class="radio-inline control-label">2nd Option</label>
</div>
</fieldset>
I have a directive define for formprogress
<formprogress progress={{progressValue}} />
Assume that "progressValue" is a scope variable, now I want to update this value somehow, to show the form progress.How it would possible?
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>