javascript - 如何调试 Unique 在 AngularUI 中无法正确显示？

Question

包含

<script src="/js/angular/angular.min.js"></script>
<script src="/js/angular/angular-ui.min.js"></script>
<script src="/js/angular/app.js"></script>

我的应用程序

"use strict";

var myApp = angular.module('myApp', ['ui'], function($interpolateProvider,$httpProvider) {
    $interpolateProvider.startSymbol('[[');
    $interpolateProvider.endSymbol(']]');
});

<小时/>

如果我这样做

<p>[[ skills  ]]</p>

我收到了

[{"id":17,"type":"Content Management","name":"NPM","value":"84","description":null,"img_path":null,"created_at":"2017-03-08 14:00:26","updated_at":"2017-03-09 15:25:50"},{"id":16,"type":"Content Management","name":"Composer ","value":"80","description":null,"img_path":null,"created_at":"2017-03-08 14:00:14","updated_at":"2017-03-09 13:16:54"},{"id":15,"type":"Framework","name":"AngularJS","value":"73","description":null,"img_path":null,"created_at":"2017-03-08 13:59:00","updated_at":"2017-03-08 13:59:30"},{"id":14,"type":"Content Management","name":"RequireJS","value":"65","description":null,"img_path":null,"created_at":"2017-03-08 13:58:06","updated_at":"2017-03-09 13:17:10"},{"id":9,"type":"Content Management","name":"Bower","value":"70","description":null,"img_path":null,"created_at":"2017-03-08 13:54:53","updated_at":"2017-03-09 13:17:02"},{"id":8,"type":"Web Scaffolding","name":"Yeoman","value":"50","description":null,"img_path":null,"created_at":"2017-03-08 13:54:43","updated_at":"2017-03-09 13:09:57"},{"id":7,"type":"Build System","name":"Gulp","value":"90","description":null,"img_path":null,"created_at":"2017-03-08 13:54:18","updated_at":"2017-03-09 13:07:20"},{"id":6,"type":"Development Environment","name":"Docker","value":"60","description":null,"img_path":null,"created_at":"2017-03-08 13:53:59","updated_at":"2017-03-09 14:15:38"},{"id":5,"type":"Development Environment","name":"Vagrant","value":"70","description":null,"img_path":null,"created_at":"2017-03-08 13:53:46","updated_at":"2017-03-08 13:53:46"},{"id":3,"type":"Build System","name":"Grunt ","value":"88","description":null,"img_path":null,"created_at":"2017-03-08 13:49:40","updated_at":"2017-03-09 12:01:04"},{"id":2,"type":"Server Management","name":"Linux","value":"87","description":null,"img_path":null,"created_at":"2017-03-08 13:45:34","updated_at":"2017-03-09 14:15:27"},{"id":1,"type":"Framework","name":"Laravel 5","value":"95","description":null,"img_path":null,"created_at":"2017-03-08 13:24:16","updated_at":"2017-03-09 14:15:14"}]

<小时/>

如果我这样做

<强> <p ng-repeat="skill in skills ">[[ skill.type ]]</p>

我得到

Content Management

Content Management

Framework

Content Management

Content Management

Web Scaffolding

Build System

Development Environment

Development Environment

Build System

Server Management

Framework

现在，我尝试了这个

<强> <p ng-repeat="skill in skills | unique: 'skill.type' ">[[ skill.type ]]</p>

我收到了

Content Management

我做错了什么？为什么只打印1份？

我希望得到这样的东西

Content Management

Framework

Web Scaffolding

Build System

Development Environment

Server Management

Answer 1

AngularJS 中没有内置 groupBy。如果您不想自己写一个，可以将 lodash 包装起来。在这种情况下，您可以只使用 _.uniq 函数(除非您真正进行分组，而不仅仅是选择唯一的条目)。

编辑:Lodash 值得安装，因为它提供了一系列实用程序。您可以通过以下方式过滤独特的技能类型
$scope.uniqueSkills = _.uniqBy($scope.skills, '类型');

然后在 View 中，使用“ng-repeat=skill in uniqueSkills | orderBy: type”

有几种方法可以做到这一点。您还可以创建一个调用 lodash 函数的过滤器，但这可以解决问题。