Question

假设我们的控制器中有一个数组，如下所示：

$scope.elements = [
  {
    title: title-1,
    desc: description-1
  },
  {
    title: title-2,
    desc: description-2
  },
  {
    title: title-3,
    desc: description-3
  },
  {
    title: title-4,
    desc: description-4
  }
]

我希望遍历数组，以便我可以按如下方式放置元素：

<div class="row">
  <div class="col-sm-6">
    {{ elements[0].title }}
    {{ elements[0].desc }}
  </div>
  <div class="col-sm-6">
    {{ elements[1].title }}
    {{ elements[1].desc }}
  </div>
</div>
<div class="row">
  <div class="col-sm-6">
    {{ elements[2].title }}
    {{ elements[2].desc }}
  </div>
  <div class="col-sm-6">
    {{ elements[3].title }}
    {{ elements[3].desc }}
  </div>
</div>

......等等。

如果我们可以通过ng-repeat同时获取两个连续元素并将其传递给指令，则可以实现这一点。可以这样做吗？如果是这样，如何在指令内处理获取的数组对象？

Answer 1

我会使用$ index属性来执行此操作。隐藏ng-if的效率有点低，如果这是一个巨大的重复，你可能想要一个更优雅的解决方案。

<div class="row" ng-repeat="element in elements" ng-if="$index <=  elements.length /2">
  <div class="col-sm-6">
    {{ elements[$index*2].title }}
    {{ elements[$index*2].desc }}
  </div>
  <div class="col-sm-6" ng-if="elements[$index*2 + 1]"> //ng-if for if you want to remove last element if odd array.
    {{ elements[$index*2 + 1].title }}
    {{ elements[$index*2 + 1].desc }}
  </div>
</div>

Answer 2

看起来像这样就像创建另一个数组来迭代

一样简单

$scope.TemplateArray = [
[0,1],
[2,3],
etc...
]

然后将此用于ng-repeat TemplateArray中的数组

<div class="row">
  <div class="col-sm-6">
    {{ elements[array[0]].title }}
    {{ elements[array[0]].desc }}
  </div>
  <div class="col-sm-6">
    {{ elements[array[1]].title }}
    {{ elements[array[1]].desc }}
  </div>
</div>

Answer 3

执行此操作的最佳方法可能是将阵列预处理为您拥有的多个列的组，然后对该阵列进行ng-repeat。因此，将您的元素预处理成类似于：

的内容

$scope.processedElements = [
   [{title:'1',desc:'1d'},{title:'2',desc:'2d'},{title:'3',desc:'3d'},{title:'4',desc:'4d'}],
   [{title:'5',desc:'5d},.......      ]

];

然后

 <div ng-repeat="item in processedElements">
      {{item[0].title}} {{item[1].title}}       // etc. etc

 </div>

Answer 4

我认为这可以解决您的问题

var app = angular.module('plunker', []);
app.controller('example', function($scope) {
  $scope.limit = 2;
  $scope.elements = [];
  $scope.$watch('limit', function() {
    $scope.elements = elements;
  });
  elements = [{
    title: 'title-1',
    desc: 'description-1'
  }, {
    title: 'title-2',
    desc: 'description-2'
  }, {
    title: ' title-3',
    desc: 'description-3'
  }, {
    title: 'title-4',
    desc: 'description-4'
  }];
});

<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link rel="stylesheet" href="style.css" />
  <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.8/angular.js" data-semver="1.4.8"></script>
  <script src="app.js"></script>
</head>

<body>
  <div ng-controller="example">
    <input type="number" ng-model="limit">
    <div class="row">
      <div class="col-sm-6" ng-repeat="el in elements" ng-if="$index < limit">
        {{el.title}} {{el.desc}}
      </div>
    </div>
    <p>seperator</p>
    <div class="row">
      <div class="col-sm-6" ng-repeat="el in elements" ng-if="$index >= limit">
        {{el.title}} {{el.desc}}
      </div>
    </div>
  </div>
</body>

</html>

如何使用ng-repeat同时获取两个连续的数组对象

4 个答案: