如何動態添加輸入表單？

我試圖動態添加輸入表單，當「新項目」被點擊。但並不知道如何在js部分編寫代碼。任何想法？如何動態添加輸入表單？

這裏是我的代碼：

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

來源

2014-02-27 Jusleong

使用數組和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

來源

2014-02-27 21:46:25

需要添加一點點（ng-model on inputs）。例如，在你jsBin中添加'{{items | json}}'並填寫一些表單，你會看到:) – jnthnjns

@Asok如何通過angularjs編輯佔位符值？ – Jusleong

@Asok謝謝。我不想添加比原來需要的更多。現在更新。 :) –

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

來源

2014-07-20 02:42:19

如何動態添加輸入表單？

回答

相關問題