<div class="radio">
<label><input type="radio" ng-model="tb3r4" value="0" ng-checked="true">Do not specify</label>
</div>
<div class="radio">
<label><input type="radio" ng-model="tb3r4" value="1">Yes</label>
</div>
<div class="radio">
<label><input type="radio" ng-model="tb3r4" value="2">No</label>
</div>
</div>
Now i am checking condition
<span ng-if="tb3r4==0">None specified</span>
But this condition is not working
Instead of using ng-checked. Initialise you model value to 0. This should be done in your controller.
app.controller('MainCtrl', function($scope) {
$scope.tb3r4 = 0;
});
<div class="radio">
<label><input type="radio" ng-model="tb3r4" value="0">Do not specify</label>
</div>
Plunkr
Related
After AngularJS update to 1.8, once I click and call DayTypechange(2) method, the radio button value does not update. Here is my html:
<div class="btn-group btn-group-sm col-xs-11 col-md-10 select topmargine">
<div class="col-xs-6 col-sm-6 select">
<input type="radio" name="response" ng-model="fullDay" ng-click='DayTypechange(1)' ng-class="{selected: fullDay}" class="col-xs-2 col-sm-2 col-md-2 col-lg-2" id="wholeDay" ng-value="'1'" />
<label class="col-xs-10 formtextNormal" for="wholeDay">Whole day(s)</label>
</div>
<div class="col-xs-6 select">
<input type="radio" name="response" ng-model="fullDay" ng-click='DayTypechange(2)' ng-class="{selected: !fullDay}" class="col-xs-2 col-sm-2 col-md-2 col-lg-2" id="partDay" ng-value="'0'" />
<label class="col-xs-10 formtextNormal" for="partDay">Part day</label>
</div>
</div>
You should consider using ng-change for input clicks like checkboxes, radios and selects.
angular.module('changeExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.confirmed = "No"
$scope.change = function() {
console.log('radio clicked of value ', $scope.confirmed)
};
}]);
<html ng-app='changeExample'>
<head><script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script></head>
<body ng-controller="ExampleController">
<label><input type="radio" ng-model="confirmed" value="Yes" ng-change="change()" name='changer' /> Yes</label>
<label><input type="radio" ng-model="confirmed" name='changer' value="No" ng-change="change()" />NO</label>
<hr><div>Current radio = {{confirmed}}</div>
</body></html>
So i have this html. The issues is that is changing the model(filter) when i select one of those that i have create in a static way but the dynamic ones does not trigger the change of the value. Any ideas?
Thanks.
<div class="row">
<div class="col-xs-6">
<h3>Group 1</h3>
<hr>
<div class="checkbox">
<input type="radio" name="filterGroup" ng-model="filter" ng-value="5"><label>5</label>
</div>
<div class="checkbox">
<input type="radio" name="filterGroup" ng-model="filter" ng-value="4'"><label>4</label>
</div>
</div>
<div class="col-xs-6">
<h3>Group 2</h3>
<hr>
<div class="checkbox">
<input type="radio" name="filterGroup" ng-model="filter" ng-value="3"><label>3</label>
</div>
<div class="checkbox">
<input type="radio" name="filterGroup" ng-model="filter" ng-value="2'"><label>2</label>
</div>
<div class="checkbox">
<input type="radio" name="filterGroup" ng-model="filter" ng-value="1"><label>1</label>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-6">
<h3>DinamicItems</h3>
<hr>
<div class="checkbox" ng-repeat="item in items">
<input type="radio" name="filterGroup" ng-model="filter" ng-value="'{{item.value}}'"><label>{{item.text}}</label>
</div>
</div>
</div>
What Charlie is saying is, your model of tag is a primitive one. Each instance of ng-repeat creates it's own scope. Therefore, your models, although named 'tag', are not in fact the same.
To remedy, you should make your model something like vm.tags (vm = view model.)
A few things to read up on, and learn more:
Controller As: https://johnpapa.net/angularjss-controller-as-and-the-vm-variable/
ng-repeat: https://docs.angularjs.org/api/ng/directive/ngRepeat
Understanding Scopes https://github.com/angular/angular.js/wiki/Understanding-Scopes (When I was getting started with Angular, I had to read through this a few times, and still do on occasion)
How to access checked checkbox value in controller?
Here radio buttons array fill many radio buttons.
<label class="item item-input" ng-show="item.types !=''">
<div ng-repeat="type in item.types" style="margin-left:5px;">
<label class="item item-radio">
<input type="radio" name="group" ng-model="param.type">
<div class="item-content">
{{type.name}}
</div>
<i class="radio-icon ion-checkmark"></i>
</label>
</div>
</label>
And Controller code
$scope.addItem = function(params) {
alert(params.type);
};
Given that you didn't post the rest of your controller code, I can't say for sure that this is the problem (or your only problem), but I suspect that changing ng-model to type and changing params.type to $scope.type in your addItem function would do the trick. Like so:
<label class="item item-input" ng-show="item.types !=''">
<div ng-repeat="type in item.types" style="margin-left:5px;">
<label class="item item-radio">
<input type="radio" name="group" ng-model="type">
<div class="item-content">
{{type.name}}
</div>
<i class="radio-icon ion-checkmark"></i>
</label>
</div>
</label>
And in your controller:
$scope.addItem = function(params) {
alert($scope.type);
};
<div class="radio-inline" ng-repeat="customerOption in customerOptions">
<input type="radio" name="customer" ng-change="getCustomers(customerType)" ng-model="customerType" ng-value="customerOption.Key" ng-checked="customerOption.Checked" />{{customerOption.Value}}
</div>
This doesn't seem to do anything:
ng-attr-id="{{customerOption.Value}}"
or:
ng-attr-id="customerOption.Value"
or:
id="customerOption.Value"
These puts exactly that line in the html
That's a quick plunker to show use of ng-model for default radio
http://plnkr.co/edit/F3M2fzLaYYrIwQdtuwHT?p=preview
app.controller('MainCtrl', function($scope) {
$scope.gender = 'female';
});
<body ng-controller="MainCtrl">
<input type="radio" name="sex" value="male" ng-model="gender">Male
<br>
<input type="radio" name="sex" value="female" ng-model="gender">Female
</body>
I need to make a system to change the total price by number of tickets selected. I created some radio buttons to choose the number of ticket. The ploblem is that the default value is unset and the result is null on loading.
<input type="radio" ng-model="people" value="1" checked="checked"><label>1</label>
<input type="radio" ng-model="people" value="2"><label>2</label>
<input type="radio" ng-model="people" value="3"><label>3</label>
<ul>
<li>{{10*people}}€</li>
<li>{{8*people}}€</li>
<li>{{30*people}}€</li>
</ul>
Please see my jsfiddle.
Set a default value for people with ngInit
<div ng-app>
<div ng-init="people=1" />
<input type="radio" ng-model="people" value="1"><label>1</label>
<input type="radio" ng-model="people" value="2"><label>2</label>
<input type="radio" ng-model="people" value="3"><label>3</label>
<ul>
<li>{{10*people}}€</li>
<li>{{8*people}}€</li>
<li>{{30*people}}€</li>
</ul>
</div>
Demo: Fiddle
<div ng-app="" ng-controller="myCntrl">
<input type="radio" ng-model="people" value="1"/><label>1</label>
<input type="radio" ng-model="people" value="2"/><label>2</label>
<input type="radio" ng-model="people" value="3"/><label>3</label>
</div>
<script>
function myCntrl($scope){
$scope.people=1;
}
</script>
why not just ng-checked="true"
In Angular 2 this is how we can set the default value for radio button:
HTML:
<label class="form-check-label">
<input type="radio" class="form-check-input" name="gender"
[(ngModel)]="gender" id="optionsRadios1" value="male">
Male
</label>
In the Component Class set the value of 'gender' variable equal to the value of
radio button:
gender = 'male';
<input type="radio" name="gender" value="male"<%=rs.getString(6).equals("male") ? "checked='checked'": "" %>: "checked='checked'" %> >Male
<%=rs.getString(6).equals("male") ? "checked='checked'": "" %>