<!DOCTYPE html>
<html ng-app="plunker">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-messages.min.js"></script>
<script src="https://gitcdn.xyz/repo/angular/bower-material/v0.11.4/angular-material.js"></script>
<link rel="stylesheet" href="https://gitcdn.xyz/repo/angular/bower-material/v0.11.4/angular-material.css" />
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="MainCtrl as ctrl">
<div layout="column">
<div layout="row">
<md-content layout="column" layout-padding class="autoScroll">
<md-input-container class="md-icon-float">
<!-- Use floating label instead of placeholder -->
<label>Name</label>
<md-icon md-svg-src="img/icons/ic_person_24px.svg" class="name"></md-icon>
<input ng-model="user.name" type="text">
</md-input-container>
<md-input-container md-no-float>
<md-icon md-svg-src="img/icons/ic_phone_24px.svg"></md-icon>
<input ng-model="user.phone" type="text" placeholder="Phone Number">
</md-input-container>
<md-input-container >
<!-- Use floating placeholder instead of label -->
<md-icon md-svg-src="img/icons/ic_email_24px.svg" class="email"></md-icon>
<input ng-model="user.email" type="email" placeholder="Email (required)" ng-required="true">
</md-input-container>
<md-input-container md-no-float>
<md-icon md-svg-src="img/icons/ic_place_24px.svg" style="display:inline-block;"></md-icon>
<input ng-model="user.address" type="text" placeholder="Address" >
</md-input-container>
<md-input-container class="md-icon-float md-icon-right">
<label>Donation Amount</label>
<md-icon md-svg-src="img/icons/ic_card_giftcard_24px.svg"></md-icon>
<input ng-model="user.donation" type="number" step="0.01">
<md-icon md-svg-src="img/icons/ic_euro_24px.svg"></md-icon>
</md-input-container>
<md-input-container class="md-icon-float">
<!-- Use floating label instead of placeholder -->
<label>Name</label>
<md-icon md-svg-src="img/icons/ic_person_24px.svg" class="name"></md-icon>
<input ng-model="user.name" type="text">
</md-input-container>
<md-input-container md-no-float>
<md-icon md-svg-src="img/icons/ic_phone_24px.svg"></md-icon>
<input ng-model="user.phone" type="text" placeholder="Phone Number">
</md-input-container>
<md-input-container >
<!-- Use floating placeholder instead of label -->
<md-icon md-svg-src="img/icons/ic_email_24px.svg" class="email"></md-icon>
<input ng-model="user.email" type="email" placeholder="Email (required)" ng-required="true">
</md-input-container>
<md-input-container md-no-float>
<md-icon md-svg-src="img/icons/ic_place_24px.svg" style="display:inline-block;"></md-icon>
<input ng-model="user.address" type="text" placeholder="Address" >
</md-input-container>
<md-input-container class="md-icon-float md-icon-right">
<label>Donation Amount</label>
<md-icon md-svg-src="img/icons/ic_card_giftcard_24px.svg"></md-icon>
<input ng-model="user.donation" type="number" step="0.01">
<md-icon md-svg-src="img/icons/ic_euro_24px.svg"></md-icon>
</md-input-container>
<md-input-container class="md-icon-float">
<!-- Use floating label instead of placeholder -->
<label>Name</label>
<md-icon md-svg-src="img/icons/ic_person_24px.svg" class="name"></md-icon>
<input ng-model="user.name" type="text">
</md-input-container>
</md-content>
</div>
<div layout="row">
<div flex>
<md-content class="md-padding" layout="column">
<md-chips ng-model="ctrl.selectedVegetables" md-autocomplete-snap md-require-match="true">
<md-autocomplete
md-selected-item="ctrl.selectedItem"
md-search-text="ctrl.searchText"
md-items="item in ctrl.querySearch(ctrl.searchText)"
md-item-text="item.name"
placeholder="Search for a vegetable">
<span md-highlight-text="ctrl.searchText">{{item.name}}</span>
</md-autocomplete>
<md-chip-template>
<span>
<strong>{{$chip.name}}</strong>
</span>
</md-chip-template>
</md-chips>
</md-content>
</div>
<div style="height:800px"></div>
</div>
</div>
</body>
</html>
var app = angular.module('plunker', ['ngMaterial']);
app.controller('MainCtrl', function($scope) {
var self = this;
self.readonly = false;
self.selectedItem = null;
self.searchText = null;
self.querySearch = querySearch;
self.vegetables = loadVegetables();
self.selectedVegetables = [];
self.selectedVegetables2 = [];
/**
* Search for vegetables.
*/
function querySearch (query) {
var results = query ? self.vegetables.filter(createFilterFor(query)) : [];
return results;
}
/**
* Create filter function for a query string
*/
function createFilterFor(query) {
var lowercaseQuery = angular.lowercase(query);
return function filterFn(vegetable) {
return (vegetable._lowername.indexOf(lowercaseQuery) === 0);
};
}
function loadVegetables() {
var veggies = [
{
'name': 'A1'
},{
'name': 'A2'
},{
'name': 'A3'
},{
'name': 'A4'
},{
'name': 'A5'
},{
'name': 'A6'
},{
'name': 'A7'
},{
'name': 'A8'
}
];
return veggies.map(function (veg) {
veg._lowername = veg.name.toLowerCase();
return veg;
});
}
});
/* Styles go here */