0

包括 

<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
4

3 回答 3

1

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

编辑：Lodash 值得为它提供的一系列实用工具安装整个瑞士军刀。您可以通过类似
$scope.uniqueSkills = _.uniqBy($scope.skills, 'type');

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

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

于 2017-03-09T22:47:39.817 回答
1

我刚刚像这样更新了你的 html 并且它有效：

      <div>
        <li ng-repeat="item in items|unique: 'type'">{{item.type}}</li>
      </div>

请看看这里的plunker 。关键是指定您想要唯一性的属性。

于 2017-03-10T04:13:07.583 回答
1 
I got this working,


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

app.controller('DemoCtrl', function($scope) {
  $scope.skills=[{"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"}];
});

app.filter('unique', function() {
    return function(collection, primaryKey) { //no need for secondary key
      var output = [], 
          keys = [];
          var splitKeys = primaryKey.split('.'); //split by period


      angular.forEach(collection, function(item) {
            var key = {};
            angular.copy(item, key);
            for(var i=0; i<splitKeys.length; i++){
                key = key[splitKeys[i]];    //the beauty of loosely typed js :)
            }

            if(keys.indexOf(key) === -1) {
              keys.push(key);
              output.push(item);
            }
      });

      return output;
    };
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

  
          <div ng-app="demoapp" ng-controller="DemoCtrl">
            <li ng-repeat="item in skills | unique:'type'">{{item.type}}</li>
          </div>

于 2017-03-10T04:34:01.410 回答