angularjs ng-repeat $索引内的ng-repeat

slwdgvem 于 2022-11-21 发布在 Angular

关注(0)|答案(3)|浏览(186)

这是我第一次使用Angularjs，如果有人能帮我解决代码中的问题，我将非常感谢。（一个用户可能有多个compte，一个compte也可能有多个mandats，当我单击AddMandatItem时，它会添加一个<div>，这是使用<ng-repeat>添加的，但是当我第二次点击AddMandatItem（在另一个compte上）时，它添加了2个项目（第一个项目在第二个项目之前添加）。我可以引用父compte，以便我的<ng-repeat>添加我想为每个compte添加的任务数吗？

<button ng-click="addCompteItem()">Add a compte</button>
<div ng-repeat="compteItem in compteItems track by $index">
  <h2>
   <strong>Compte {{$index + 1}}</strong>
  </h2>
  <label>Id</label>
  <input type="text" ng-model="compte[$index].id" />
  <label>Unique reference</label>
  <input type="text" ng-model="compte[$index].uniqueRef" />

  <div ng-repeat="mandat in mandats track by $index>
  <label>Id</label>
  <input ng-model="compte[$parent.$index].mandat[$index].id" />

<div>
<button ng-click="addMandatItem($parent.$index,$index)">Add a mandat for          that compte
</button>
 </div>

应用程序.js：

$scope.compteItems = [{}];
$scope.addCompteItem = function(){
    $scope.compteItems.push({});
};

$scope.mandats=[];
$scope.addMandat = function(i,j){
        console.log(i);
        console.log(j);
        $scope.mandats.push([]);
        var newMandat = {};
        $scope.mandats[i][j]=newMandat;
};

angularjs

来源：https://stackoverflow.com/questions/43974381/ng-repeat-inside-ng-repeat-index

3条答案

按热度按时间

nvbavucw1#

我找到了这个解决方案，我将其分享给其他有同样问题的人：这是我的App.js

$scope.addMandat = function(i){
        if($scope.compteItems[i].mandats==null){
            $scope.compteItems[i].mandats=[];
        }
        console.log(i);
        var newMandat = {};
        $scope.compteItems[i].mandats.push(newMandat);
};

还有：

<button ng-click="addCompteItem()">Add a compte</button>

<div ng-repeat="compte in compteItems" ng-init="parentIndex = $index">
  <h2>
   <strong>Compte {{parentIndex + 1}}</strong>
  </h2>
  <label>Id</label>
  <input type="text" ng-model="compte[parentIndex].id" />
  <label>Unique reference</label>
  <input type="text" ng-model="compte[parentIndex].uniqueRef" />

  <div ng-repeat="mandat in compte.mandats" ng-init="childIndex = $index">
  <label>Id</label>
  <input ng-model="compte.mandat[childIndex].id" />
  </div>
  <div>
  <button ng-click="addMandatItem(parentIndex)">Add a mandat for that compte
  </button>
 </div>
 </div>

赞(0）回复(0）举报 2022-11-21

1mrurvl12#

您可以将某些变量用于索引，也可以使用。有关详细信息，请参阅AngularJS Documentation

<button ng-click="addCompteItem()">Add a compte</button>
    <div ng-repeat="compteItem in compteItems" ng-init="parentIndex = $index">
      <h2>
       <strong>Compte {{parentIndex + 1}}</strong>
      </h2>
      <label>Id</label>
      <input type="text" ng-model="compte[parentIndex].id" />
      <label>Unique reference</label>
      <input type="text" ng-model="compte[parentIndex].uniqueRef" />
    
      <div ng-repeat="mandat in compte[parentIndex].mandat" ng-init="childIndex = $index">
        <label>Id</label>
        <input ng-model="compte[parentIndex].mandat[childIndex].id" />
    
      <div>
      <button ng-click="addMandatItem(parentIndex,childIndex)">Add a mandat for that compte
      </button>
    </div>

赞(0）回复(0）举报 2022-11-21

gz5pxeao3#

按照你的要求，我相信你想做这样的事情：

HTML格式：

<button ng-click="addCompteItem()">Add a compte</button>
    <div ng-repeat="compteItem in compteItems track by $index">
      <h2>
       <strong>Compte {{$index + 1}}</strong>
      </h2>
      <label>Id</label>
      <input type="text" ng-model="compteItem.id" />
      <label>Unique reference</label>
      <input type="text" ng-model="compteItem.uniqueRef" />

      <div ng-repeat="mandat in compteItem.mandats track by $index">
      <label>Id</label>
      <input ng-model="mandat.id" />

    <div>
    <button ng-click="addMandatItem(compteItem)">Add a mandat for that compte
    </button>
     </div>

JS：

$scope.compteItems = [{}];
    $scope.addCompteItem = function(){
        $scope.compteItems.push({mandats:[]});
    };

    $scope.addMandat = function(compteItem){           
            var newMandat = {};
            compteItem.mandats.push(newMandat);
    };

赞(0）回复(0）举报 2022-11-21

我来回答

angularjs ng-repeat $索引内的ng-repeat

3条答案

相关问题

热门标签

最新问答