Wie dynamisch Eingabeformular hinzufügen?

Ich versuche, Eingabeformulare dynamisch hinzuzufügen, wenn auf "Neues Element" geklickt wird. Aber nicht wirklich wissen, wie man den Code im js Teil schreibt. Irgendeine Idee?Wie dynamisch Eingabeformular hinzufügen?

Hier ist mein Code:

<!doctype html> 
<html ng-app> 
    <head> 
    <title>Angular - My Notes</title> 
    <link rel="stylesheet" type="text/css" href="css/index.css"> 

    <body> 
    <h1>My Notes</h1> 
    <div ng-controller="Note"> 
     <input type="text" placeholder="Question"> 
     <input ng-class="{'blockInput': !inlineChecked}" type="text" placeholder="enter text..."> 
     <input type="checkbox" name="check" value="inline" ng-model="inlineChecked"> Inline 
     <br> 
     <button ng-click="add()">New Item</button> 
    </div> 

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js"></script> 
    <script type="text/javascript"> 

     var Note = function($scope){ 
     // create a variable contain new input forms?? 
     } 


    </script> 
    </body> 
</html>

Quelle

2014-02-27 Jusleong

ein Array verwenden und ngRepeat ...

<!doctype html> 
<html ng-app> 
    <head> 
    <title>Angular - My Notes</title> 

    <body> 
    <h1>My Notes</h1> 
    <div ng-controller="Note"> 
     <div ng-repeat="item in items"> 
     <input type="text" placeholder="{{item.questionPlaceholder}}" ng-model="item.question"> 
     <input ng-class="{'blockInput': !item.inlineChecked}" type="text" placeholder="enter text..." ng-model="item.text"> 
     <input type="checkbox" name="check" value="inline" ng-model="item.inlineChecked"> Inline 
     </div> 
     <button ng-click="add()">New Item</button> 
    </div> 

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js"></script> 
    <script type="text/javascript"> 

     var Note = function($scope){ 
     $scope.items = []; 

     $scope.add = function() { 
      $scope.items.push({ 
      inlineChecked: false, 
      question: "", 
      questionPlaceholder: "foo", 
      text: "" 
      }); 
     }; 
     } 


    </script> 
    </body> 
</html>

JsBin ... http://jsbin.com/fusapojo/4/edit?html,output

Quelle

2014-02-27 21:46:25

Ein bisschen mehr muss hinzugefügt werden (ng-Modell an Eingängen). Zum Beispiel fügen Sie in Ihrem jsBin '{{items | json}} 'und füllen Sie etwas von dem Formular aus, und Sie werden sehen :) – jnthnjns

@Asok wie der Platzhalterwert von angularjs bearbeiten? – Jusleong

@Asok Vielen Dank. Ich wollte dem Original nicht mehr hinzufügen, als benötigt wurde. Jetzt aktualisiert :) –

HTML:

<div ng-repeat="flavour in flavours" class="form-group"> 
    <label class="col-sm-1 control-label">Name</label> 
    <div class="col-sm-2"> 
     <div class="input-group"> 
       <input type="text" class="form-control" placeholder="" ng-model="flavour.name"> 
     </div>     
    </div> 
</div>

JS : $ scope.flavours = [];

$scope.addFlavour = function() { 
    $scope.flavours.push({ 
     name: "", 
     pg: 100, 
     vg: 0, 
     quantity: 5.0 
    }); 
}

Quelle

2014-07-20 02:42:19

Wie dynamisch Eingabeformular hinzufügen?

Antwort

Verwandte Themen