Question

我是棱角分明的新人。我试图找到一种方法将一半数据数组渲染到一个div中，另一个渲染到另一个div。

angular.module("testApp", []).controller('mainCtrl', function($scope){
  $scope.data = [{name:'a'},{name:'b'},{name:'c'},{name:'d'}];
});

我的模板看起来像这样

<div ng-controller="mainCtrl">
  <ul>
    <li ng-repeat="item in data">{{item.name}}</li> // Render only <li>a</li> <li>b</li>
  <ul>

    <div> SOME OTHER CONTENT</div>
   <ul>
    <li ng-repeat="item in data">{{item.name}} // Render only <li>c</li> <li>d</li>
  <ul>
</div>

我想使用相同的控制器，而不是使用2个不同的控制器来呈现不同的内容，但我无法使其工作。

非常感谢任何帮助。谢谢， Zaver

Answer 1

您似乎可以使用自定义过滤器来解决此问题，例如：

自定义过滤器：

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

app.filter('myFilter', function() {
  return function(items, param1) {
    var end= param1 == 1 ? Math.floor(items.length/2) : items.length ;
    var start =  param1 == 1 ? 0 : Math.floor(items.length/2) ;
    console.log("param ",param1," start: ", start, " end: ", end);
    return items.slice(start, end);
    };
});

<强> HTML

<ul>
   <li ng-repeat="item in items|myFilter:1">{{item.name}}</li>
</ul>
<div>second have</div>
<ul>
    <li ng-repeat="item in items|myFilter:2">{{item.name}}</li>
</ul>

您的过滤器|myFilter:1中的哪个位置设置了您想要的一半1|2。

注意：我考虑使用“50％＆gt;”这样的符号并且'＆lt; 50％'而不是1 | 2寻找一种有趣的方法来使过滤器更清晰和可扩展，并且可以进行诸如25％＆lt; 75％＆gt;之类的事情。但我不确定你的情景是否有必要。希望1 | 2能做到这一点。

这是plunker demo

Answer 2

您可以使用数组的slice method来选择您为ng-repeat提供的部分：

<div ng-controller="mainCtrl">
  <ul>
    <li ng-repeat="item in data.slice(0, data.length/2)">
      {{item.name}}  // Render only a and b
    </li>
  <ul>

  <div> SOME OTHER CONTENT</div>
  <ul>
    <li ng-repeat="item in data.slice(data.length/2)">
      {{item.name}} // Render only c and d
    </li>
  <ul>
</div>

angularjs在多个容器中呈现数据

2 个答案: