【问题标题】:Angular unique filter for nested ng-repeat用于嵌套 ng-repeat 的 Angular 独特过滤器
【发布时间】:2015-08-17 14:35:40
【问题描述】:

我想插入内容,以便在复选框旁边打印每个学生的位置,而不会出现任何重复的位置。我的 HTML 如下所示:

<ul ng-repeat="group in groups">
  <li ng-repeat="student in group.students | unique : 'location'">
     <input type="checkbox" id="location">
     <label for="location" ng-repeat="loc in student.location | unique : 'loc'">{{loc}}</label>
  </li>
</ul>

我正在使用此过滤器代码过滤掉我的 JSON 文件中的重复项。

App.js

app.filter('unique', function() {
    return function(input, key) {
        var uniqueList = [];
        var unique = {};
        for(var i = 0; i < input.length; i++) {
            if(typeof unique[input[i][key]] == "undefined") {
                unique[input[i][key]] = "";
                uniqueList.push(input[i]);

            }
        }
        return uniqueList;
    };
});

我的 JSON 文件格式如下:

"groups" : [
    {
        "name": "a",
        "students" : [
            {
                "student_name" : "Nate",
                "location" : "California"
            },
            {
                "student_name" : "Natalie",
                "location": "Michigan"
            },
            {
                "student_name" : "Tim",
                "location" : "California"
            }
        ]
    },
    {
        "name" : "b",
        "students" : [
            {
                "student_name" : "Brian",
                "location" : "California"
            }
        ]
    }
]

它打印加利福尼亚密歇根加利福尼亚。我认为这是因为 uniqueList 在进入另一个组时会重置。我不确定如何使用嵌套对象来解决这个问题。有人可以向我解释我做错了什么吗?

【问题讨论】:

  • 是的..确实是因为你进入了另一个组。
  • 在提问时注意您使用的是哪个版本的 Angular 也很有帮助,有时在特定版本中事情会更容易。

标签: javascript json angularjs filter unique


【解决方案1】:

您将无法在过滤器中执行此操作,因为您是正确的,每个组都会重置它。您需要事先将组组合起来,然后遍历组合组。

【讨论】:

  • 感谢您的回复。我不完全确定解决此问题的最佳方法是。我在想也许可以手动抓取 JSON 数组并用 vanilla javascript 处理它?
  • Angular 1.4 有一个合并的概念,足以满足您的需求。 angular.merge(object1, object2); docs.angularjs.org/api/ng/function/angular.merge 但是我不确定您使用的是什么版本。你可以像你说的那样使用 vanilla js 并组合对象。
  • 谢谢,我一定会去看看的!
  • @glocklesnar 如果这对您来说是一个很好的答案,您能否将其标记为已接受的答案,否则如果您需要任何其他帮助,请告诉我。
猜你喜欢
  • 2014-06-21
  • 2015-09-15
  • 1970-01-01
  • 1970-01-01
  • 2016-05-20
  • 1970-01-01
  • 1970-01-01
  • 2020-05-28
  • 1970-01-01
相关资源
最近更新 更多