<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>
Related
Adding ng-model to a radio button set seems to alter which input gets focused when tabbing. Tested with IE11 (11.842.10586.0), and Angular 1.6.3 (though it occurs in earlier versions of Angular as well).
<!DOCTYPE html>
<html lang="en">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="formCtrl">
<form>
<input type="text" ng-model="firstname">
<br/>
<input type="radio" value="1" name="radioExample" checked>
<input type="radio" value="2" name="radioExample">
<input type="radio" value="3" name="radioExample">
<br/>
<input type="text" ng-model="firstname">
</form>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
$scope.firstname = "";
$scope.radioValue = "1";
});
</script>
</body>
</html>
http://plnkr.co/edit/nwo7sljK4NIEr66T6q7w
This shows the normal behavior. If a radio button is selected, tabbing to the radio button group focuses on the selected radio button. If no radio button selected, tabbing forward focuses on the first element, tabbing back focuses on the last one.
<!DOCTYPE html>
<html lang="en">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="formCtrl">
<form>
<input type="text" ng-model="firstname">
<br/>
<input type="radio" value="1" ng-model="radioValue" name="radioExample">
<input type="radio" value="2" ng-model="radioValue" name="radioExample">
<input type="radio" value="3" ng-model="radioValue" name="radioExample">
<br/>
<input type="text" ng-model="firstname">
</form>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
$scope.firstname = "";
$scope.radioValue = "1";
});
</script>
</body>
</html>
http://plnkr.co/edit/vMlG7RUg2Kd0sZLmr0lb
This shows the modified behavior when ng-model is added. Regardless of whether a radio button is selected or not, tabbing forward focuses on the first element, tabbing back focuses on the last one. This behavior persists even after a different radio button is selected manually.
I've tried using various combinations of checked/ng-checked, delaying model initialization with $timeout, and using <fieldset>.
What is causing this and more importantly is there a way I can make the second scenario behave like the first one (focusing on the selected radio button when tabbing)?
I forked your "modified behavior" example on plnkr and added the checked attribute to the first radio button. Tabbing then behaves exactly as it does in your "normal behavior" example.
<input type="radio" value="1" ng-model="radioValue" name="radioExample" checked>
<input type="radio" value="2" ng-model="radioValue" name="radioExample">
<input type="radio" value="3" ng-model="radioValue" name="radioExample">
http://plnkr.co/edit/gbZFgKJbJyEBdgB9jXho?p=preview
To reconcile any differences between the model and the 'checked' attribute you could add/remove the attribute when the model value changes.
Try with ng-value. $scope.radioValue = "1"; data type is string change to $scope.radioValue = 1;
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
$scope.firstname = "";
$scope.radioValue = 1;
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="formCtrl">
<form>
<input type="text" ng-model="firstname">
<br/>
<input type="radio" data-ng-model="radioValue" data-ng-value="1" name="radioExample">
<input type="radio" data-ng-model="radioValue" data-ng-value="2" name="radioExample">
<input type="radio" data-ng-model="radioValue" data-ng-value="3" name="radioExample">
<br/>
<input type="text" ng-model="firstname">
</form>
</div>
</body>
I have a form using AngularJS (classic one) that should display or not a CompanyName field only if the User is a Company.
By default the "Individual" radio should be selected:
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<body ng-app>
<h4>You are:</h4>
Name <input ng-model="user.name">
<h5>Individual or Company?</h5>
<input type="radio" name="type" id="company" ng-model="user.isCompany" ng-value=true> a company = '{{user.isCompany}}'<br>
<input type="radio" name="type" id="individ" checked > an individual<br>
<div ng-show="user.isCompany">
Company Name <input ng-model="user.companyName">
</div>
</body>
How to bind to the radio checked value in order to make it work?
I added a ng-model and ng-value to both inputs, so when you will click again on "an individual", the company form will disapear.
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<body ng-app ng-init="user.isCompany = false">
<h4>You are:</h4>
Name <input ng-model="user.name">
<h5>Individual or Company?</h5>
<input type="radio" name="type" ng-model="user.isCompany" ng-value="true"> a company = '{{user.isCompany}}'<br>
<input type="radio" name="type" ng-model="user.isCompany" ng-value="false"> an individual<br>
<div ng-show="user.isCompany">
Company Name <input ng-model="user.companyName">
</div>
</body>
Note that I added ng-init="user.isCompany = false" in <body>. You can also move it to your controller to make it cleaner:
$scope.user = { ..., 'isCompany': false };
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<body ng-app>
<h4>You are:</h4>
Name <input ng-model="user.name">
<h5>Individual or Company?</h5>
<input type="radio" name="type" id="company" ng-model="user.isCompany" ng-value="true"> a company = '{{user.isCompany}}'<br>
<input type="radio" name="type" id="individ" ng-init="user.isCompany=false" ng-model="user.isCompany" checked ng-value="false"> an individual<br>
<div ng-show="user.isCompany">
Company Name <input ng-model="user.companyName">
</div>
</body>
I am using angularjs.
In my html I have 2 input boxes
edit = false;
<input type="text" value="" data-ng-if="edit" ng-model="name">
<input type="text" value="" data-ng-if="!edit" ng-model="singleAppDetails.name">
so here I wanted to show only one input box at a time based on some condition.
But i guess ng-if is not working.Basically if edit == true i want to show singleAppDetails.name and if edit == false then name
HTML DOM:
<div ng-app="myApp">
<div ng-controller="testController">
<input type="text" value="" data-ng-if="edit" ng-model="name">
<input type="text" value="" data-ng-if="!edit" ng-model="singleAppDetails.name">
</div>
</div>
Angularjs:
angular.module('myApp', [])
.controller("testController", function($scope){
$scope.singleAppDetails = {
"name" : "name if not editable"
}
$scope.name = "name if editable";
$scope.edit = false;
})
example: http://codepen.io/anon/pen/NqKQJO
You could try this:
<input type="text" value="" data-ng-if="edit" ng-model="(edit ? name : singleAppDetails.name)">
This way you only use an input to cover both cases.
<div ng-switch="edit">
<div ng-switch-when='false'>
<input type="text" value="" ng-model="singleAppDetails.name">
</div>
<div ng-switch-when='true'>
<input type="text" value="" ng-model="name">
</div>
</div>
<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
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'": "" %>