Angularjs 如何动态添加输入表单？_Angularjs

Angularjs 如何动态添加输入表单？

angularjs

Angularjs 如何动态添加输入表单？,angularjs,Angularjs,我试图在单击“新建项”时动态添加输入表单。但我不知道如何在js部分编写代码。有什么想法吗这是我的密码： <!doctype html> <html ng-app> <head> <title>Angular - My Notes</title> <link rel="stylesheet" type="text/css" href="css/index.css"> <body>

我试图在单击“新建项”时动态添加输入表单。但我不知道如何在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>


角度-我的笔记
我的笔记
内联


新项目
var注释=功能（$scope）{
//创建包含新输入表单的变量？？
}

使用数组并重复

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


角度-我的笔记
我的笔记
内联
新项目
var注释=功能（$scope）{
$scope.items=[]；
$scope.add=函数（）{
$scope.items.push（{
inlineChecked:错误，
问题：“，
问题占位符：“foo”，
案文：“”
});
};
}

杰宾

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>

需要添加多一点（输入上的ng模型）。例如，在您的jsBin中添加

{{items | json}

并填写一些表单，您将看到：）@Asok如何通过angularjs编辑占位符值？@Asok谢谢。我不想在原来的基础上添加更多的内容。现在更新。：）@user3112938要动态占位符吗？我会添加一个答案，说明如何做到这一点，但安东尼的应该是一个被接受的。我本打算在这里输入，但文字太多。@anthonychu+1，你想问动态占位符问题还是我来问？

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