带有选择,复选框和单选按钮的Angular JS表单

Question

带有选择,复选框和单选按钮的Angular JS表单

Sha*_*eer 9 html javascript css jquery angularjs

我是角度JS的新手.我用select,checkbox和单选按钮创建了一个简单的表单.我不清楚这些值是如何绑定角度的这些字段.如何最小化我的HTML代码并指定控制器内的值.我想要在我点击计算按钮时添加每个值的结果并显示为总数.我的表格如下.

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>

Run Code Online (Sandbox Code Playgroud)

调节器

 var myApp = angular.module('myApp',[]);
 myApp.controller('totalController',["$scope",function($scope){
      $scope.showTotal = false;
      $scope.calculate = (function(){
         $scope.showTotal = true;
          });
     }]);

Run Code Online (Sandbox Code Playgroud)

我的目标是了解select,checkbox和单选按钮的值绑定.

Answer 1

小智 -1

这是一个具体的方法：

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

通常，为了访问控制器中的表单元素，您需要使用ng-model. 我建议查看这里的文档：https ://docs.angularjs.org/api/ng/input

归档时间：	10 年，2 月前
查看次数：	969 次
最近记录：	10 年，2 月前