2

追加のフォームフィールドを作成する方法についてオンラインで調査しました。私が使用している方法は、このサイトから来ています。

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 つのフォーム フィールドがあります。新しいフォーム フィールドを追加する選択肢が欲しい。ボタンはありますが、ボタンをクリックして別のフォームフィールドを追加すると; それは動作しません。それは同じままです。

タグに入っているものが少しずれているのではないかと思っていました。

お手伝いありがとう。これに何時間も苦労しています。

4

1 に答える 1

0

私のコメントを拡張するには：

ディレクティブ 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-repeatandchoice属性が必要かどうかわかりません... 他の誰かがこの答えを改善できるかもしれません。しかし、うまくいけば、それはあなたにどのように進めるかについてのいくつかのアイデアを与えるはずです.

于 2014-03-20T14:05:57.817 に答える