Skip to content

Instantly share code, notes, and snippets.

@CarlBoneri
Created March 31, 2016 01:56
Show Gist options
  • Save CarlBoneri/32d54ba01730031047cb88237e0f1ba7 to your computer and use it in GitHub Desktop.
Save CarlBoneri/32d54ba01730031047cb88237e0f1ba7 to your computer and use it in GitHub Desktop.
Options With Async Search
<div ng-controller="SelectAsyncController" layout="column" layout-align="center center" style="padding:40px" ng-cloak="" class="selectdemoOptionsWithAsyncSearch" ng-app="MyApp">
<p>Select can call an arbitrary function on show. If this function returns a promise, it will display a loading indicator while it is being resolved:</p>
<div layout="column" layout-align="center center">
<md-select placeholder="Assign to user" ng-model="user" md-on-open="loadUsers()" style="min-width: 200px;">
<md-option ng-value="user" ng-repeat="user in users">{{user.name}}</md-option>
</md-select>
<p class="md-caption">You have assigned the task to: {{ user ? user.name : 'No one yet' }}</p>
</div>
</div>
<!--
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that can be in foundin the LICENSE file at http://material.angularjs.org/license.
-->
angular.module('MyApp',['ngMaterial', 'ngMessages', 'material.svgAssetsCache'])
.controller('SelectAsyncController', function($timeout, $scope) {
$scope.user = null;
$scope.users = null;
$scope.loadUsers = function() {
// Use timeout to simulate a 650ms request.
return $timeout(function() {
$scope.users = $scope.users || [
{ id: 1, name: 'Scooby Doo' },
{ id: 2, name: 'Shaggy Rodgers' },
{ id: 3, name: 'Fred Jones' },
{ id: 4, name: 'Daphne Blake' },
{ id: 5, name: 'Velma Dinkley' }
];
}, 650);
};
});
/**
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that can be in foundin the LICENSE file at http://material.angularjs.org/license.
**/
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/svg-assets-cache.js"></script>
<script src="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.0-rc2/angular-material.js"></script>
/*
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that can be in foundin the LICENSE file at http://material.angularjs.org/license.
*/
<link href="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.0-rc2/angular-material.css" rel="stylesheet" />
<link href="https://material.angularjs.org/1.1.0-rc2/docs.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment