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'": "" %>
Related
I have a case where I use a form with AngularJS. I have radio buttons and the last option is always text input. All of them are connected with the same model so what ever user chooses with radio buttons or type in text input is saved in model.
The problem is with text input. When a user clicks the radio button, its value is shown on the last text input line. How do I stop that and still keep it connected to the same ng-model?
<label class="form-check-label">
<input class="form-check-input" type="radio" name="religion" value="sikhizm" ng-model="$ctrl.diversityTest.religion">Sikhizm
</label>
<label class="form-check-label">
<input class="form-check-input" type="radio" name="religion" value="catholic" ng-model="$ctrl.diversityTest.religion">Catholic
</label>
...
<div class="mtl-20">
Please write in: <input class="input-material" type="text" name="religion" ng-model="$ctrl.diversityTest.religion" >
</div>
You can try a different approach like this:-
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.$ctrl = {};
$scope.$ctrl.diversityTest = {};
});
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<label class="form-check-label">
<input class="form-check-input" type="radio" name="religion" value="sikhizm" ng-model="$ctrl.diversityTest.religion">Sikhizm
</label>
<label class="form-check-label">
<input class="form-check-input" type="radio" name="religion" value="catholic" ng-model="$ctrl.diversityTest.religion">Catholic
</label>
...
<div class="mtl-20">
Please write in: <input ng-keyup="$ctrl.diversityTest.religion = $ctrl.diversityTest.temp" class="input-material" type="text" name="religion" ng-model="$ctrl.diversityTest.temp" >
</div>
<br>
This is religion model value : {{$ctrl.diversityTest.religion}}
</div>
How about this for a solution? Basically, have the radio buttons. Create an 'Other' with a text box, and only allow it to be selected if you enter a value for other. The text model is different, but when it's filled, will allow you to select 'Other' which will take on the value of what is in the textbox, and pass it to the model you care about.
<label class="form-check-label">
<input class="form-check-input" type="radio" name="religion" value="{{ textValue }}"
ng-disabled="!textValue && !(textValue.length > 5)"
ng-model="diversityTest.religion">
Other
<input class="input-material" type="text" name="religion" ng-model="textValue">
</label>
http://plnkr.co/edit/f9lzNLhZuy0c7BI2kE2A?p=preview
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 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 trying to implement radio button group validation inside angular's ng-repeat.
HTML
<div ng-repeat="driver in drivers">
<input required type="radio" value="M" name="driverGender" ng-model="driver.gender">
<input required type="radio" value="F" name="driverGender" ng-model="driver.gender">
</div>
Name attribute should change in each repeat. I tried appending $index value, but it's not working properly when drivers are dynamically added and removed. What is the best way to implement this?
In your code all radio buttons will relate with each other, because name attribute of all is the same. You should identify each radio buttons group. For example:
<div ng-repeat="driver in drivers">
<input required type="radio" value="M" name="driverGender[{{driver.id}}]" ng-model="driver.gender">
<input required type="radio" value="F" name="driverGender[{{driver.id}}]" ng-model="driver.gender">
</div>
Just try this If you need like below
Think their is two repeats in model, then code of the view should be like this
<div ng-repeat="driver in drivers" class="ng-scope">
<input required="" type="radio" value="M" name="driverGender0" ng-model="driver.gender"/>
<input required="" type="radio" value="F" name="driverGender0" ngmodel="driver.gender">
</div>
<div ng-repeat="driver in drivers" class="ng-scope">
<input required="" type="radio" value="M" name="driverGender1" ng-model="driver.gender"/>
<input required="" type="radio" value="F" name="driverGender1" ngmodel="driver.gender"/>
</div>
So this is the code for get this
<div ng-repeat="driver in drivers">
<input required type="radio" value="M" name="driverGender{{$index}}" ng-model="driver.gender">
<input required type="radio" value="F" name="driverGender{{$index}}" ngmodel="driver.gender">
</div>
you can change name attribute based on index value , can you check out my answer in following link
In controller
$scope.drivers = [{id:1,name:'test',gender:'M'}];
In html
<div ng-repeat="driver in drivers">
<input required type="radio" value="M" name="driverGender{{$index}}" ng-model="driver.gender">
<input required type="radio" value="F" name="driverGender{{$index}}" ng-model="driver.gender">
</div>
https://plnkr.co/edit/byLRBhUI2Ezc5CofHnPC?p=preview
Finally I found one solution.
<div ng-repeat="driver in drivers">
<div ng-form="radioForm">
<input required type="radio" value="M" name="driverGender{{$index}}" ng-model="driver.gender">
<input required type="radio" value="F" name="driverGender{{$index}}" ngmodel="driver.gender">
{{radioForm.$error}}
</div>
</div>
Now the validation in happening thorugh the ng-form. Radio buttons will be grouped because $index.
<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>