0

私はこの JSFiddle コードを持っています:

http://jsfiddle.net/rnnb32rm/285/

<div ng-app="angularjs-starter" ng-controller="MainCtrl">
   <fieldset  data-ng-repeat="choice in choicesA">
      <input type="text" ng-model="choice.name" name="" placeholder="Enter name">
         <button class="addfields" ng-click="addNewChoice()">Add fields</button>
      <button class="remove" ng-click="removeChoice()">-</button>
   </fieldset>


   <div id="choicesDisplay">
      {{ choicesA }} <br/>
      {{ choicesB }}
   </div>
</div>

JS:

var app = angular.module('angularjs-starter', []);

  app.controller('MainCtrl', function($scope) {

  $scope.choicesA = [{id: 'choice1'}, {id: 'choice2'}];

  $scope.choicesB = [];

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

  $scope.removeChoice = function() {
    var lastItem = $scope.choicesA.length-1;
    $scope.choicesA.splice(lastItem);
  };

});

ご覧のとおりaddNewChoice()、配列にオブジェクトを追加する関数があり、配列choicesAのオブジェクト番号に基づいてテキストボックスが追加されますchoicesA。

最初の のボタンfieldsetをクリックしたときにのみ、最初にテキストボックスを追加する必要があります。生成されたテキストボックスに書き込むデータはバインドされ、配列のオブジェクトを分離するために追加されます。他のすべてのボタンについても同じです (したがって、各ボタンはテキストボックスを独自のタグにのみ追加できます)。これも、配列内のオブジェクトの数に基づいて生成されます。Add fieldsfieldsetchoicesBAdd fieldsAdd fieldfieldsetchoicesA

私はすべてを試しましたが、私はそれを理解することはできません。少し不明な点がある場合は、さらに説明できます。よろしくお願いします。

編集：ご協力いただきありがとうございます。詳しく説明させてください：

Spring REST API とJavaResource & Action という名前の 2 つのオブジェクト (JPA エンティティ) があり、オブジェクト Resource にはアクションのリストが含まれ、Action にはリソースへの参照が含まれています。

ページをロードするとResource、名前付きの $http.get() メソッドによって、既に保存したオブジェクトの配列がデータベースから返されますchoicesA。配列の構造は次のようになります。

[
{"idResource":1, "nameResource": "resName1"},
{"idResource":2, "nameResource": "resName2"}
......etc depends oh how much rows I got from the DB
]

Action別のネストされていない配列という名前のオブジェクトの配列を投稿する別のメソッド $http.post() がありますchoicesB。配列構造は次のようになります。

[
{"idAction":1, "nameAction":"nameAction1", "resource": 
   {"idResource":1, "nameResource": "resName1"},
{"idAction":2, "nameAction":"nameAction2", "resource": 
   {"idResource":2, "nameResource": "resName2"},
   ..
}
{...},
{...}
...
]

したがって、choicesA配列にはResource$http.get() で取得したオブジェクトが含まれます。次に、配列にActionオブジェクトを入力し、 choicesB$http.post() を使用して配列を保存します。すべてActionのオブジェクトにオブジェクトが含まれている必要がありResourceます。fieldsetたとえば、クリックして最初のタグにさらにアクションを追加すると、配列の最初のActionオブジェクトを入力し、配列にある最初のオブジェクトにchoicesB割り当てることを意味します。ResourcechoicesA

choicesBアクションの数を決定して入力し、配列に保存できるようにしたいと考えています。しかし、すべてのアクションは、Resource私が説明したように特定のオブジェクトに関連しています。

申し訳ありませんが、またよろしくお願いします。

4

3 に答える 3

1

あなたがやろうとしていることは、2つのネストされた配列を持つことだと思います。

次に、ネストしたでしょうng-repeat。その配列を関数の引数として渡すことで、どの配列を追跡しますか

意見

 <fieldset data-ng-repeat="group in choices">
    <div ng-repeat="choice in group">
      <input type="text" ng-model="choice.name" name="" placeholder="Enter name">
      <button class="addfields" ng-click="addNewChoice(group)">Add fields</button>
      <button class="remove" ng-click="removeChoice(group)">-</button>
    </div>
 </fieldset>

JS

$scope.choices = [
  // first group
  [{id: 'choice1'}, { id: 'choice2'}],
  //second group
  [{}]
];


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

$scope.removeChoice = function(group) {
  group.pop();
};

IDシステムを少し変更する必要があることに注意してください。通常、これはとにかくサーバーから取得されます

DEMO

于 2016-02-29T04:17:10.117 に答える