如何使用angularjs添加其他表單字段？

Question

我在線研究了如何創建其他表單字段。 我使用的方法來自此站點。

http://mrngoitall.net/blog/2013/10/02/adding-form-fields-dynamically-in-angularjs/

因此，基本上我想做的是輸入數據。但是我不知道某個人想要輸入多少數據點。所以我要啟用什么功能，以便如果他們輸入其他點希望。

我的標簽中有這個：

  <script>
  function AngularCtrl($scope) {
  function Controller($scope) {
    $scope.master = {};

    $scope.update = function(user) {
      $scope.master = angular.copy(user);
    };

    $scope.reset = function() {
      $scope.user = angular.copy($scope.master);
    };

    $scope.reset();
  }

$scope.choices = [{id: 'choice1'}]; 

$scope.addNewChoice = function() {
    var newItemNo = $scope.choices.length+1;
    $scope.choices.push({'id':'choice'+newItemNo});
};


$scope.showAddChoice = function(choice) {
    return choice.id === $scope.choices[$scope.choices.length-1].id;
};



$scope.showChoiceLabel = function (choice) {
    return choice.id === $scope.choices[0].id;
}



}
</script>

然后在我的標簽中添加：

<div class="form-group" ng-controller="Controller" data-ng-repeat="choice in choices">
  <form novalidate class="simple-form">
        Title of Chart: <input type="text" ng-model="chart.title" /><br />
        Series Name: <input type="text" ng-model="chart.series" /><br />
        Series Data: <input type="text" ng-model="series.data" /><br>

        <label for="choice" ng-show="showChoiceLabel(choice)">Choices</label>
        <button ng-show="showAddChoice(choice)" ng-
         click="addNewChoice()">Add another choice</button>
        <input type="text" ng-model="choice.name" name="" placeholder="Enter
         a new data point">         
        <br>
        <button ng-click="reset()">RESET</button>
        <button ng-click="update(user)">SAVE</button>
  </form>
</div>

如您所見，我擁有4個表單字段。 我想選擇添加一個新的表單字段。 我有按鈕，但是當我單擊按鈕以添加另一個表單字段時； 這是行不通的。 它保持不變。

我想知道我的標簽中的內容是否有問題。

感謝您的幫助。 一直為此奮斗了幾個小時。

Answer 1

擴展我的評論：

指令html：

<label for="choice" ng-show="showChoiceLabel(choice)">Choices</label>
<input type="text" ng-model="choice.name" name="" placeholder="Enter a new data point" />         
<br>
<button ng-click="reset()">RESET</button>
<button ng-click="update(user)">SAVE</button>

主要內容：

<div class="form-group" ng-controller="Controller">
  <form novalidate class="simple-form">
    Title of Chart: <input type="text" ng-model="chart.title" /><br />
    Series Name: <input type="text" ng-model="chart.series" /><br />
    Series Data: <input type="text" ng-model="series.data" /><br>
    <button ng-show="showAddChoice(choice)" ng-click="addNewChoice()">Add another choice</button>

    <div choice-editor ng-repeat="c in choices" choice="c"></div>
 </form>

我對使用指令的最佳做法非常模糊。 有時我似乎過多地混入了單個指令，即，我不確定您是否要在同一元素上使用ng-repeat和choice屬性...也許其他人可以改善此答案。 但這應該給您一些有關如何進行的想法，希望如此。