HTML
<!DOCTYPE html>
<html
ng-app="ui.bootstrap.demo">
<head>
<title>Autocomplete</title>
<script src="angular.js"></script>
<script src="autocomplete.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.4.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<meta charset="utf-8" />
</head>
<body
class='container-fluid' ng-controller="TypeaheadCtrl">
<div class="jumbotron">
<div>
<div class="row col-lg-offset-4">
<div
class="row">
<div class="col-lg-2">
<label>Enter Name</label>
</div>
<div class="col-lg-6">
<input
type="text" ng-model="selected" typeahead="i as i.Name for i in
Names | filter:$viewValue | limitTo:8" typeahead-min-length='3' class="form-control">
</div>
<i ng-show="loadingLocations" class="glyphicon
glyphicon-refresh"></i>
<div ng-show="noResults">
<i class="glyphicon
glyphicon-remove"></i> No Results Found
</div>
</div>
</div>
<div class="row col-lg-offset-4
col-lg-6"
style="margin-top:40px;">
<pre>Model: {{selected | json}}</pre>
</div>
</div>
</div>
</body>
</html>
JS
angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('TypeaheadCtrl', function ($scope, $http) {
$scope.selected = undefined;
$http.get('http://services.odata.org/V3/OData/OData.svc/Products?$format=json').success(function (response) {
$scope.Names = response.value;
}).error(function (error) {
alert(error);
})
});
No comments:
Post a Comment