Question

我是角度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>

控制器

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

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

Answer 1

对于下拉部分，请尝试此代码

<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>

Answer 2

这是一种具体的方法：

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

通常，要访问控制器中的表单元素，您需要使用ng-model。我建议在这里查看文档：{{3}}

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

2 个答案: