Question

我有以下示例嵌套ng-repeats：

<div ng-repeat="item1 in controller.items1>
    [[ item1 ]] // This displays properly
    <div ng-repeat="item2 in controller.items2">
        [[ item2 ]] // This displays properly
    </div>
    [[ item1 ]] // This doesn't get displayed
</div>

似乎嵌套的ng-repeat正在阻止第一个在代码中使用。有人可以帮助解决第一次重复重复的问题吗？

Answer 1

工作正常。检查以下示例 -

<body ng-controller="myCtrl" ng-app="app">
  <div ng-repeat="item1 in items1">
    {{item1.name}}
    <div ng-repeat="item2 in items2">
      {{item2.name}}
    </div>
    {{item1.name}}
  </div>
</body>

var app = angular.module('app', [])

app.controller('myCtrl', ['$scope',
  function($scope) {
    $scope.items1 = [{
      name: 'Item1 - One'
    }, {
      name: 'Item1 - Two'
    }, {
      name: 'Item1 -Three'
    }, {
      name: 'Item1 - Four'
    }];

     $scope.items2 = [{
      name: 'Item2 - One'
    }, {
      name: 'Item2 - Two'
    }, {
      name: 'Item2 - Three'
    }, {
      name: 'Item2 - Four'
    }];
  }
]);

Answer 2

你在第一次ng-repeat中缺少一个倒置的逗号。哪个应该给你一个语法错误：

body {
    font-family: "ALG";
}

此外，如果您有一个像这样的dimnesional数组结构：

<div ng-repeat="item1 in controller.items1">
    {{ item1 }} 
    <div ng-repeat="item2 in controller.items2">
        {{ item2 }}
    </div>
    {{ item1 }}
</div>

应该可以正常工作:)。

Answer 3

使用下面的代码进行检查，并且对我来说没问题。使用尖括号来打印输出并检查下面的代码

HTML

<div ng-app='myapp'>

    <div ng-controller="MainCtrl">

    <div ng-repeat="s in palletElement ">
    {{s.name}}
    <div ng-repeat="s1 in test" >
    {{s1.Data}}
    </div>
    {{s.Data[0].lenght}}
    </div>
    </div>
    </div>

controller.js

(function(){
    angular.module('myapp', []).controller('MainCtrl', function($scope) {
        var counter = 0;

        $scope.palletElement = [{
            name: 'Pallet 1',
            Data: [{
                name: 'item 1',
                itemId: '284307',
                shipmentId: 'eb44f690-c97a-40e3-be2a-0449559e171a',
                itemCode: '',
                description: 'Bicycle parts - frame',
                quantity: '31',
                handlingUnit: 'CTN',
                weight: '613.04',
                class: '',
                lenght: '102',
                width: '42',
                height: '61',
                flag: 'P'

            }, {
                name: 'item 2',
                itemId: '284308',
                shipmentId: 'eb44f690-c97a-40e3-be2a-0449559e171a',
                itemCode: '',
                description: 'Bicycle parts - fork',
                quantity: '22',
                handlingUnit: 'CTN',
                weight: '242.99',
                class: '',
                lenght: '75',
                width: '34',
                height: '18',
                flag: 'P'
            }]
        }]; 
        $scope.test = [{
            name: 'Pallet 1',
            Data: [{

                quantity: '31',
                handlingUnit: 'CTN'

            }, {

                quantity: '22',
                handlingUnit: 'CTN'

            }]
        }];
    });
}());

输出我得到了：

Pallet 1
[{"quantity":"31","handlingUnit":"CTN"},   {"quantity":"22","handlingUnit":"CTN"}]
102

Angular nested ng-repeat - 在第二个之后重复使用

3 个答案: