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 
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 に答える