<!DOCTYPE html>
<html ng-app="contactChipsDemo">
<head>
<title></title>
<meta charset="utf-8" />
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
<script>
(function () {
'use strict';
angular
.module('contactChipsDemo', ['ngMaterial'])
.controller('ContactChipDemoCtrl', DemoCtrl);
function DemoCtrl($q,
$timeout) {
var self = this;
var pendingSearch, cancelSearch
= angular.noop;
var cachedQuery, lastSearch;
self.allContacts =
[{ "name": "Ranjeet", "email": "m.augustine@example.com", "image": "Cars/me.jpg", "_lowername": "marina
augustine" },
{ "name": "Lamborghini", "email": "o.sarno@example.com", "image": "Cars/Lamborghini.jpg", "_lowername": "oddr sarno" },
{ "name": "bugatti", "email": "n.giannopoulos@example.com", "image": "Cars/bugatti.jpg", "_lowername": "nick
giannopoulos" },
{ "name": "farrari", "email": "n.garner@example.com", "image": "Cars/farrari.jpg", "_lowername": "narayana garner" },
{ "name": "porsche", "email": "a.gros@example.com", "image": "Cars/porsche.jpg", "_lowername": "anita gros" },
{ "name": "Porsche19", "email": "m.smith@example.com", "image": "Cars/Porsche19.jpg", "_lowername": "megan smith" },
{ "name": "mee", "email": "t.metzger@example.com", "image": "Cars/mee.jpg", "_lowername": "tsvetko metzger" },
{ "name": "Hector Simek", "email": "h.simek@example.com", "image": "http://lorempixel.com/50/50/people?7", "_lowername": "hector simek" },
{ "name": "Some-guy withalongalastaname", "email": "s.withalongalastaname@example.com", "image": "http://lorempixel.com/50/50/people?8", "_lowername": "some-guy
withalongalastaname" }];
self.contacts =
[self.allContacts[0]];
self.asyncContacts
= [];
self.filterSelected = true;
self.querySearch =
querySearch;
self.delayedQuerySearch = delayedQuerySearch;
/**
* Search for
contacts; use a random delay to simulate a remote call
*/
function
querySearch(criteria) {
cachedQuery =
cachedQuery || criteria;
return cachedQuery ?
self.allContacts.filter(createFilterFor(cachedQuery)) : [];
}
function delayedQuerySearch(criteria)
{
cachedQuery =
criteria;
if (!pendingSearch ||
!debounceSearch()) {
cancelSearch();
return pendingSearch
= $q(function (resolve, reject) {
cancelSearch = reject;
$timeout(function () {
resolve(self.querySearch());
refreshDebounce();
},
Math.random() * 500, true)
});
}
return pendingSearch;
}
function
refreshDebounce() {
lastSearch =
0;
pendingSearch
= null;
cancelSearch =
angular.noop;
}
function
debounceSearch() {
var now = new Date().getMilliseconds();
lastSearch =
lastSearch || now;
return ((now -
lastSearch) < 300);
}
function
createFilterFor(query) {
var lowercaseQuery =
angular.lowercase(query);
return function
filterFn(contact) {
return
(contact._lowername.indexOf(lowercaseQuery) != -1);;
};
}
}
})();
</script>
<style>
.md-virtual-repeat-scroller {
width:100%px;
}
.chipsdemoContactChips md-content.autocomplete {
min-height: 250px;
}
.chipsdemoContactChips md-content.autocomplete input {
min-width: 1300px;
}
.chipsdemoContactChips .md-item-text.compact {
padding-top: 15px;
padding-bottom: 15px;
}
.chipsdemoContactChips .contact-item {
box-sizing: border-box;
}
.chipsdemoContactChips .contact-item.selected {
opacity: 0.5;
}
.chipsdemoContactChips .contact-item.selected h3 {
opacity: 0.5;
}
.chipsdemoContactChips .contact-item .md-list-item-text {
padding: 14px 0;
max-width: 800px;
}
.chipsdemoContactChips .contact-item .md-list-item-text h3 {
margin: 0 !important;
padding: 0;
line-height: 1.2em !important;
}
.chipsdemoContactChips .contact-item .md-list-item-text h3, .chipsdemoContactChips .contact-item .md-list-item-text p {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
@media screen and (min-width: 1000px) {
.chipsdemoContactChips .contact-item {
float: left;
width: 100%;
}
}
.chipsdemoContactChips md-contact-chips {
margin-bottom: 10px;
}
.chipsdemoContactChips .md-chips {
padding: 5px 0 8px;
}
.chipsdemoContactChips .fixedRows {
height: 250px;
overflow: hidden;
}
</style>
</head>
<body>
<div ng-controller="ContactChipDemoCtrl as ctrl" layout="column" ng-cloak>
<md-content class="md-padding autocomplete" layout="column">
<md-contact-chips ng-model="ctrl.contacts"
md-contacts="ctrl.querySearch($query)"
md-contact-name="name"
md-contact-image="image"
md-contact-email="email"
md-require-match="true"
md-highlight-flags="i"
filter-selected="ctrl.filterSelected"
placeholder="To">
</md-contact-chips>
</md-content>
</div>
</body>
</html>
