如何让ng-repeat过滤掉重复的结果

16 浏览
0 Comments

如何让ng-repeat过滤掉重复的结果

我正在通过一个JSON文件运行一个简单的ng-repeat,并希望获取类别名称。大约有100个对象,每个对象属于一个类别,但只有大约6个类别。

我的当前代码如下:


输出是100个不同的选项,大部分是重复的。我如何使用Angular来检查{{place.category}}是否已经存在,如果已经存在,则不创建选项?

编辑:在我的javascript中,$scope.places = JSON数据,只是为了澄清

0
0 Comments

问题出现的原因:用户使用ng-repeat指令时,希望通过过滤器unique来去除重复的结果,但是却发现只返回了第一个结果,而不是所有唯一的状态列表。

解决方法:用户可以使用lodash编写自己的过滤器。过滤器的作用是通过lodash的uniq方法将数组中重复的元素去除,通过传入的字段来判断元素是否重复。具体的代码如下:

app.filter('unique', function() {

return function (arr, field) {

return _.uniq(arr, function(a) { return a[field]; });

};

});

其他用户也提供了不同的解决方法。其中有用户使用了underscore库,称这个解决方案非常有效。还有用户提到了lodash和underscore之间的差异,并给出了关于lodash的更多信息。

对于需要返回ng-repeat中的第一个名字的用户,可以使用以下方式调用过滤器:

ng-repeat="elm in data.content | unique:'title'"

通过使用自定义的过滤器或者其他用户提供的解决方法,可以实现ng-repeat过滤出唯一的结果。

0
0 Comments

问题的出现原因:在ng-repeat中重复显示相同的结果。

解决方法:使用AngularUI中的unique过滤器。首先,可以从AngularUI unique过滤器获取源代码。然后,在ng-options(或ng-repeat)中直接使用该过滤器。

以下是使用unique过滤器的示例代码:

<select ng-model="orderProp" ng-options="place.category for place in places | unique:'category'">
    <option value="0">Default</option>
    // unique options from the categories
</select>

如果无法让AngularUI的unique过滤器正常工作,可能是因为过滤器位于单独的模块中。在你的模块中,需要将其作为附加引用进行包含,例如:angular.module('yourModule', ['ui', 'ui.filters']);。在查看AngularUI的js文件后,这个问题得到了解决。

目前,可以在AngularJs UI Utils中找到unique过滤器。

在新版本的UI Utils中,你只需要单独包含ui.unique。可以使用bower install来安装模块。

如果不想完整地包含AngularUI,但想要使用unique过滤器,可以将unique.js的源代码复制粘贴到你的应用程序中,然后将angular.module('ui.filters')改为你的应用程序名称。

0
0 Comments

如何使ng-repeat过滤掉重复的结果

在这个问题中,用户想要在ng-repeat中过滤掉重复的结果。他们在代码中使用了angular.filter模块中的'unique'过滤器来实现这个功能。通过使用'unique'过滤器,用户可以根据指定的属性来过滤数据集合。用户还可以通过嵌套属性来进行过滤。

以下是用户提供的示例代码:

function MainController ($scope) {
 $scope.orders = [
  { id:1, customer: { name: 'foo', id: 10 } },
  { id:2, customer: { name: 'bar', id: 20 } },
  { id:3, customer: { name: 'foo', id: 10 } },
  { id:4, customer: { name: 'bar', id: 20 } },
  { id:5, customer: { name: 'baz', id: 30 } },
 ];
}

用户想要根据顾客的id来过滤数据集合,以去除重复的顾客。以下是用户在HTML中使用'unique'过滤器的示例代码:

Customer list: 

    {{ order.customer.name }} , {{ order.customer.id }} 

使用'unique'过滤器后,结果如下:

Customer list:

foo 10

bar 20

baz 30

用户还提到了一个类似的问题,他们想要处理一个嵌套列表。例如,一个包含每个订单项目列表的订单列表。用户希望能够在所有订单中显示一个唯一的项目列表。他们想要展示顾客之前订购过的所有项目。最后,用户还询问了与angular版本兼容的问题。

以上就是用户在解决如何使ng-repeat过滤掉重复结果时的问题原因和解决方法。通过使用'unique'过滤器,用户可以根据指定的属性来过滤数据集合,以去除重复的结果。用户还可以通过嵌套属性来进行过滤。希望以上内容对你有所帮助。

0