帶有選擇，復選框和單選按鈕的Angular JS表單

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 。 我建議在這里查看文檔： https ： //docs.angularjs.org/api/ng/input

帶有選擇，復選框和單選按鈕的Angular JS表單

問題描述

2 個解決方案

解決方案1
1 2015-08-10 11:40:58

解決方案2
-1 2015-08-10 11:06:21

帶有選擇，復選框和單選按鈕的Angular JS表單

問題描述

2 個解決方案

解決方案1 1 2015-08-10 11:40:58

解決方案2 -1 2015-08-10 11:06:21

解決方案1
1 2015-08-10 11:40:58

解決方案2
-1 2015-08-10 11:06:21