Geek Answers Handbook

Angular JS form with selection, checkbox and radio button

I am new to angular JS. I created a simple form using select, checkbox and radio button. I do not understand how values ​​are required for these fields in angular. How can I minimize my HTML code and specify a value inside my controller. I want the result of each value to be added and displayed as a sum when I click the "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 goal is to understand the value binding for select, checkbox and radio button.

+8
javascript jquery html angularjs css
source share
2 answers

Try this code from the dropdown

 <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>
+1
source share

Here is a specific way to do this:

http://plnkr.co/edit/WHmg6hShcfUF4FK1ajDk?p=preview

Generally, to access 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

-one
source share

More articles:


All Articles