<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap-css@*" data-semver="3.0.2" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.js" data-semver="1.1.5" data-require="angular.js@*"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.js"></script>
<script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script data-require="bootstrap@*" data-semver="3.0.2" src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
<link href="style.css" rel="stylesheet" />
<script src="script.js"></script>
</head>
<body>
<section ng-app="myApp" ng-controller="UniqueCtrl" id="unique">
<div class="page-header">
<h1>Angular-UI: Filter Unique Values</h1>
</div>
<div class="row">
<div class="span6">
<h3>What Does It Do?</h3>
<p>Filters out all duplicate objects items from an array by checking the specified key</p>
<div class="well">
<p>Select an attribute to check for uniqueness</p>
<select ng-model="attribute">
<option value="">-- No Filter --</option>
<option>firstName</option>
<option>lastName</option>
<option>id</option>
<option>gender</option>
</select>
</div>
</div>
<div class="row">
<h3>Using Unique with Ng-Repeat</h3>
<table class="table table-striped">
<thead>
<tr>
<th>First</th>
<th>Last</th>
<th>ID</th>
<th>Gender</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="record in items | unique:attribute">
<td>{{record.firstName}}</td>
<td>{{record.lastName}}</td>
<td>{{record.id}}</td>
<td>{{record.gender}}</td>
</tr>
</tbody>
</table>
</div>
<div class="row">
<h3>Hard Coded Unique Value for Last Name</h3>
<table class="table table-striped">
<thead>
<tr>
<th>First</th>
<th>Last</th>
<th>ID</th>
<th>Gender</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="record in items | unique:lastName">
<td>{{record.firstName}}</td>
<td>{{record.lastName}}</td>
<td>{{record.id}}</td>
<td>{{record.gender}}</td>
</tr>
</tbody>
</table>
</div>
<div class="row">
<h3>Filtered Items Object</h3>
<pre>{{items | unique:attribute | json}}</pre>
</div>
<div class="row">
<h3>Unfiltered Items Object</h3>
<pre>{{items | json}}</pre>
</div>
</div>
</section>
</body>
</html>
var myApp = angular.module('myApp', ['ui'])
.controller('UniqueCtrl', function($scope){
$scope.items = [
{ firstName: 'Dean', lastName: 'Sofer',
id: 1, gender: 'Male' },
{ firstName: 'Dean', lastName: 'Kuntz',
id: 2, gender: 'Male' },
{ firstName: 'Peter', lastName: 'Piper',
id: 3, gender: 'Female' },
{ firstName: 'Peter', lastName: 'Darwin',
id: 4, gender: 'Male' },
{ firstName: 'Janet', lastName: 'Piper',
id: 5, gender: 'Female' },
{ firstName: 'Dan', lastName: 'Doyon',
id: 6, gender: 'Male' },
{ firstName: 'Andy', lastName: 'Joslin',
id: 1, gender: 'Male' },
];
});
# Unique Filtering on Object Arrays
* Uses angular-ui utils library
* Examples include
- Dynamic drop down unique filtering
- Hard coded unique filtering
body { padding: 1em 3em 1em 3em; }