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属性......也许其他人可以改进这个答案。但是，这应该会给你一些如何进行的想法，希望如此。

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

1 个答案: