Question

我在与此类似的对象数组上使用ng-repeat：

var objects = [
  {
    name: 'test',
    id: 1234,
    category: 'a'
  },
  {
    name: 'sample',
    id: 4567,
    category: 'b'
  },
  {
    name: 'example',
    id: 7890,
    category: 'a'
  }, ...
];

<p ng-repeat="object in objects">{{object.name}}<p>

此数组包含十几个具有4个不同类别的对象。我想要做的是在我的UI中拆分这些对象，以在其类别标题下显示每个对象：

类别：a 测试例分类：b 样品

有没有办法用一个ng-repeat来实现这个目标？我目前的想法是，我需要根据我分类的数据将其拆分为四个相同的ng-repeat。分别在我的控制器中。只是希望有一种DRYer方法来实现这一目标。

Answer 1

Working PLUNKER

为了解决这个问题，我使用了两个Angular'过滤器'，OrderBy，它接收一个对象的属性，并根据该对象对该对象进行排序。第二个是'Filter filter'，它接收一个数组，做一些操作并将其发回。我将你的对象用作$ scope.things。

标记：

  <body ng-app="app" ng-controller="ctrl">
    <div ng-repeat="thing in things | orderBy: 'category' | thingsFilter">
      <p>{{thing}} </p>
    </div>

    <h1>Hello Plunker!</h1>
  </body>

首先，我使用orderBy，它将基于things.category属性按数组排序。然后，使用有序数组，我正在应用Angular自定义过滤器。

app.js

app.filter('thingsFilter', function () {
  return function (things) {
    var filtered = []; //Return array.
    for (var i=0; i< things.length; i++ ){ //Iterate over things.
      if (i > 0 ) { //To make sure I won't compare with things[-1]
        if ((things[i].category) != (things[i-1].category)) {
          //If category of last item is different, add the name of category.
          filtered.push("_____CATEGORY: " + things[i].category + ":");
        }
      } else { //Insert the first category.
        filtered.push("_____CATEGORY: " + things[i].category + ":");
      };
      console.log(things[i]); //Just to see what is happening.
      filtered.push(things[i].name); //Inserting the name of the thing.
    };
    console.log(filtered); //The final array to
    return filtered;       //be returned here.
  };
});

过滤器的输入是thing对象，它已由orderBy排序。所以，我有一个ORDERED数组。现在，我创建了过滤变量，它将保存要发回的所有值。

接下来，我正在查看变量i是否大于零，因此我不会与负索引进行比较并使我的代码出错。如果索引为零，那么我将添加一个类别行。

由于数组是有序的，我可以检查最后一个数组的类别是否与实际数组不同。如果是，那么我将使用filtered.push（“____ CATEGORY ...”）在数组中添加类别。

在每个for循环结束时，我会将thing [i] .name推送到要返回的数组。并且，最后，我将返回已过滤的数组，因此我的ng-repeat可以使用它。

Working PLUNKER

基于对象属性拆分ng-repeat

1 个答案: