Angular JS Formular mit Auswahl, Kontrollkästchen und Optionsfeld

Ich bin Neuling zu eckigen JS. Ich hatte ein einfaches Formular mit Auswahl, Kontrollkästchen und Optionsfeld erstellt. Mir ist nicht klar, wie die Werte für diese Felder in eckigen Klammern stehen. Wie kann ich meinen HTML-Code minimieren und den Wert in meinem Controller angeben? Ich möchte, dass das Ergebnis jedes Wertes addiert und als Summe angezeigt wird, wenn ich auf Berechnen klicke. Meine Form ist wie folgt.Angular JS Formular mit Auswahl, Kontrollkästchen und Optionsfeld

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; 
      }); 
    }]);

Mein Ziel ist es, den Wert verbindlich für ausgewählte, Kontrollkästchen und Optionsfeld zu verstehen.

Quelle

2015-08-10 Shareer

für die Auswahl, Verwendung ng-Optionen, für die anderen, Verwendung ng-repeat –

Studie einige Form Tutorials und machen Sie sich mit den eckigen Dokumenten vertraut. Verwenden Sie 'ng-model', um Benutzereingaben an das Datenmodell zu binden – charlietfl

-1

Hier ist eine spezifische Art und Weise, es zu tun:

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

Im Allgemeinen, um die Formularelemente in Ihrem Controller zugreifen zu können, müssen Sie ng-model verwenden. Ich würde empfehlen, bei der Dokumentation suchen hier: https://docs.angularjs.org/api/ng/input

Quelle

2015-08-10 11:06:21 sunaurus

Für das Drop-Down-Teil, versuchen Sie diesen Code

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

Quelle

2015-08-10 11:40:58

Angular JS Formular mit Auswahl, Kontrollkästchen und Optionsfeld

Antwort

Verwandte Themen