Menu
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.
578
Both are commonly used together on forms to select options from a list. However, a radio button is a circle with a dot inside, while a checkbox is a square with a checkmark inside—two different visual cues. Some might say that their functions are different, so they should look different.
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
