Seçme, onay kutusu ve radyo düğmesi ile açısal JS formu

Ben açısal JS için yeni biriyim. Seç, onay kutusu ve radyo düğmesiyle basit bir form oluşturmuştum. Değerlerin bu alanlar için açısal olarak nasıl bağlandıkları açık değil. HTML kodumu nasıl en aza indirebilir ve denetleyicimin içindeki değeri nasıl belirleyebilirim? Hesapla düğmesine tıkladığımda, her bir değerin sonucunun eklenmesini ve toplam olarak görüntülenmesini istiyorum. Benim formum şu şekildedir.Seçme, onay kutusu ve radyo düğmesi ile açısal JS formu

HTML

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

Amacım seçme, onay kutusu ve radyo düğmesi için bağlama değerini anlamaktır

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

Kontrolör.

kaynak

2015-08-10 Shareer

denemek diğerleri için, kullanım Çalışması çeşit öğreticiler –

ng-tekrarlamak ve açısal dokümanlar hakkında bilgi edinin. Kullanıcı girişini veri modeline bağlamak için 'ng-model' kullan – charlietfl

-1

İşte bunu yapmak için özel bir yoludur:

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

Genellikle controller içerisinde form öğeleri erişmek için, size ng-model kullanmak gerekir. Burada docs bakarak öneriyoruz: açılan kısmı için https://docs.angularjs.org/api/ng/input

kaynak

2015-08-10 11:06:21 sunaurus

, bu kodu seçme, kullanım ng-seçenekleri için

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

kaynak

2015-08-10 11:40:58

Seçme, onay kutusu ve radyo düğmesi ile açısal JS formu

cevap

İlgili konular