To use:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/angular-resource.min.js"></script>
<link rel="stylesheet" href="Content/bootstrap.min.css" />
<link rel="stylesheet" href="Content/kel.ui.css" />
<script src="Scripts/kel.ui.js"></script>
<script src="Scripts/app.js"></script>
</head>
<body ng-app="TheApp" ng-controller="TheController as c">
<h3>Angular Ajax Combobox Demo</h3>
<div>PersonId chosen: {{c.personId}}</div>
<br />
<div style="float: left">Person name: </div>
<kel-ajax-combobox ng-model="c.personId"
user-input="c.personName"
result-getter="c.resultGetter"
result-list="c.resultList"
result-total-rows="c.resultTotalRows"
selected-value="'id'"
selected-text="'fullName'"
></kel-ajax-combobox>
</body>
</html>
app.js definition. add the 'kel.ui' on the module's dependencies
var app = angular.module('TheApp', ['ngResource', 'kel.ui']);
app.controller('TheController', ['$http', '$resource', function($http, $resource) {
var vm = this;
vm.personId = 5500;
vm.personName = 'Aaron Butler';
vm.resultList = [];
vm.resultTotalRows = 0;
var dataRest = $resource('http://localhost:63692/api/AdventureWorksPeople');
vm.resultGetter = function(e) {
return dataRest.get({ userInput : e.userInput, pageNumber : e.pageNumber, pageSize : e.pageSize }, function(result) {
vm.resultList = result.persons;
vm.resultTotalRows = result.totalRows;
});
};
//// This now works:
//vm.resultGetter = function(e) {
// return dataRest.get({ userInput : e.userInput, pageNumber : e.pageNumber, pageSize : e.pageSize }).$promise.then(function(result) {
// vm.resultList = result.persons;
// vm.resultTotalRows = result.totalRows;
// });
//};
}]);
To change the width of the combox add a width attribute, e.g.,
<kel-ajax-combobox ng-model="c.personId"
user-input="c.personName"
result-getter="c.resultGetter"
result-list="c.resultList"
result-total-rows="c.resultTotalRows"
selected-value="'id'"
selected-text="'fullName'"
width="'350px'"
page-size="20"
></kel-ajax-combobox>
Sample REST implementation: http://www.anicehumble.com/2014/11/angular-ajax-combobox.html
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent