Angular JS form with select, checkbox and radio button
Question
I am newbie to angular JS. I had created a simple form with select, checkbox and radio button. I am not clear how the values are binding for these fields in angular. How can i minimize my HTML code and specify the value inside my controller. i want the result of each value to be added and displayed as total when i click on calculate button. My form is as follows.
HTML
<body ng-app="myApp">
<div class="container" ng-controller="totalController">
<form class="form-horizontal" role="form" ng-submit="calculate()">
<div class="form-group">
<label for="sel1">Select Model:</label>
<select class="form-control" id="sel1">
<option value="40000">Moto turbo</option>
<option value="20000">Moto X</option>
<option value="10000">Moto G</option>
<option value="5000">Moto E</option>
</select>
</div>
<div class="form-group">
<label for="color" class="color">Select Color:</label>
<label class="radio-inline">
<input type="radio" name="optradio" value="400">
Black </label>
<label class="radio-inline">
<input type="radio" name="optradio" value="300">
Red </label>
<label class="radio-inline">
<input type="radio" name="optradio" value="300">
White </label>
<label class="radio-inline">
<input type="radio" name="optradio" value="200">
Yellow </label>
<label class="radio-inline">
<input type="radio" name="optradio" value="250">
Blue </label>
</div>
<div class="form-group">
<label for="sel1">Select Panel:</label>
<label class="checkbox-inline">
<input type="checkbox" value="200">
Set of 1 Panel</label>
<label class="checkbox-inline">
<input type="checkbox" value="400">
Set of 2 Panel</label>
<label class="checkbox-inline">
<input type="checkbox" value="600">
Set of 3 Panel</label>
</div>
<button type="submit" class="btn btn-primary">Calculate</button>
<div role="alert" class="alert alert-success" ng-show="showTotal"> Total is : </div>
</form>
</div>
<!--container-->
</body>
Controller
var myApp = angular.module('myApp',[]);
myApp.controller('totalController',["$scope",function($scope){
$scope.showTotal = false;
$scope.calculate = (function(){
$scope.showTotal = true;
});
}]);
My aim is to understand the value binding for select, checkbox and radio button.
2 answers
solution1
1 2015-08-10 11:40:58
For the dropdown part, try this code
<div ng-controller="MyController" >
<form>
<select ng-model="myForm.car"
ng-options="obj.id as obj.name for obj in myForm.options">
</select>
</form>
<div>
{{myForm.car}}
</div>
</div>
<script>
angular.module("myapp", [])
.controller("MyController", function($scope) {
$scope.myForm = {};
$scope.myForm.car = "nissan";
$scope.myForm.options = [
{ id : "nissan", name: "Nissan" }
,{ id : "toyota", name: "Toyota" }
,{ id : "fiat" , name: "Fiat" }
];
} );
</script>
solution2
-1 2015-08-10 11:06:21
Here is a specific way to do it:
http://plnkr.co/edit/WHmg6hShcfUF4FK1ajDk?p=preview
Generally, in order to access the form elements in your controller, you need to use ng-model . I would recommend looking at the docs here: https://docs.angularjs.org/api/ng/input
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.