如何在ng重复的情况下同时获取两个连续的数组对象

How can I fetch two consecutive array objects simultaneously with ng-repeat

本文关键字：两个 对象 数组 连续 获取 ng 情况下      更新时间：2023-09-26

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

$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同时获取两个连续元素并将其传递给指令，就可以实现这一点。这能做到吗？如果是这样的话，那么如何在指令中处理提取的数组对象？

我会使用$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>

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

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

然后用这个做你的ng重复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>

最好的方法可能是将数组预处理为多个列的组，然后在该数组上重复。因此，将您的元素预处理为如下内容：

$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>

我认为这可以在一定程度上解决您的问题

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>

相关文章：