JSFiddle - React, Tailwind, and code Playground
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>
JavaScript
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 } },
];
}
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;
}
myApp.filter('unique', function () {
return function (items, filterOn) {
if (filterOn === false) {
return items;
}
if ((filterOn || angular.isUndefined(filterOn)) && angular.isArray(items)) {
var hashCheck = {}, newItems = [];
var extractValueToCompare = function (item) {
if (angular.isObject(item) && angular.isString(filterOn)) {
return deepFind(item,filterOn);
} else {
return item;
}
};
angular.forEach(items, function (item) {
var valueToCheck, isDuplicate = false;
for (var i = 0; i < newItems.length; i++) {
if (angular.equals(extractValueToCompare(newItems[i]), extractValueToCompare(item))) {
isDuplicate = true;
break;
}
}
if (!isDuplicate) {
newItems.push(item);
}
});
items = newItems;
}
return items;
};
});