2017-09-13 10 views
0

名前のユニークな値だけを印刷しようとしていますが、できません。AngularJS ng-repeatユニークは機能していません

htmlコード:

<div ng-controller="MyCtrl"> 
    <div><input type="text" ng-model="nameFilter" placeholder="Search..." /></div> 
    <p ng-repeat="contact in contacts | orderBy: 'customer.name'| unique:'customer.name'">{{ contact.customer.name }}</p> 


</div> 

JSコード:

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

function MyCtrl($scope) { 
    $scope.nameFilter = ''; 
    $scope.contacts = [ 
     { 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:5, customer: { name: 'tar', id: 30 } }, 
     { id:5, customer: { name: 'got', id: 30 } }, 
     { id:5, customer: { name: 'man', id: 30 } }, 
     { id:5, customer: { name: 'baz', id: 30 } }, 
    ]; 

} 

jsfiddleはここにある:http://jsfiddle.net/nvarun123/0tgL7u6e/73/

私はNGリピートからユニーク削除する場合、このコードが機能しています。

+0

によってあなたのコードは 'unique'カスタムフィルタが不足しています。これは組み込みのフィルタの1つではないので、あなた自身で書き込む必要があります。 –

+0

angularjsに固有のフィルタが既に定義されていると考えられます – Varun

+1

私は恐れられていません、[これらは組み込みフィルタです](https://docs.angularjs.org/api/ng/filter) –

答えて

1

ここでは、角度UIディレクティブのuniqueフィルタを下のリンクに使用しました。私はdeep finding using stringを実装するための指示に小さな変更を加えました。詳細は参照の内部にあります。

ここでは、フィルタのデモです。

JSFiddle Demo

uniqueフィルタの内側に作られた変更。

var extractValueToCompare = function (item) { 
     if (angular.isObject(item) && angular.isString(filterOn)) { 
      return deepFind(item,filterOn); 
     } else { 
      return item; 
     } 
     }; 

上記のとおり、私はdeepFind機能を実装しています。この機能は以下にも示されています。

function deepFind(obj, path) { 
    var paths = path.split('.') 
    , current = obj 
    , i; 

    for (i = 0; i < paths.length; ++i) { 
    if (current[paths[i]] == undefined) { 
     return undefined; 
    } else { 
     current = current[paths[i]]; 
    } 
    } 
    return current; 
} 

参考文献:

  1. Angular-UI unique filter

  2. Javascript get deep value by passing path

0

ここにあなたのニーズを満たす必要があり、単純なカスタムフィルタです:

app.filter("unique", function thisFilter() { 
    return function(input){ 
    var seen = { objectNames: [] }; 
    return input.filter(function(obj){ 
     return !seen.objectNames.includes(obj.customer.name) 
     && seen.objectNames.push(obj.customer.name) 
    }) 
    } 
}); 
0

使用トラック$インデックス

<p ng-repeat="contact in contacts track by $index| orderBy: 'customer.name' 
    ">{{ contact.customer.name }}</p> 
関連する問題