AngularJs的UI组件ui
Typeahead指令是⼀个⽤于智能提⽰或⾃动完成的控件，就像Jquery的AutoComplete控件⼀样。来看⼀个最简单的例⼦：
1<!DOCTYPE html>
2<html ng-app="ui.bootstrap.demo" xmlns="/1999/xhtml">
3<head>
4<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
5<link href="/Content/bootstrap.css" rel="stylesheet"/>
6<title></title>
7
8<script src="/Scripts/angular.js"></script>
9<script src="/Scripts/ui-bootstrap-tpls-1.3.2.js"></script>
10<script>
11
12 dule('ui.bootstrap.demo', ['ui.bootstrap']).controller('TypeaheadCtrl', function ($scope) {
13 $scope.selected = undefined;
14 $scope.names = [
15 { 'name': '张三', 'ename': 'zhangsan' },
16 { 'name': '李四', 'ename': 'lisi' },
17 { 'name': '王五', 'ename': 'wangwu' }
18 ];
19 });
20</script>
21
22</head>
23<body>
24<div ng-controller="TypeaheadCtrl">
25<input type="text" ng-model="selected" uib-typeahead="n.name as n.name+'('+n.ename+')' for n in names | filter:$viewValue | limitTo:8" class="form-control">
26</div>
27</body>
28</html>
在⽂本框中输⼊z，智能提⽰效果是：
选中后，⽂本框的值是：
uib-typeahead的⽤法和表单元素select中的表达式是⼀样的，可以分别指定显⽰的⽂本和选中的值。names⽤filter过滤器筛选输⼊的数据（按数组中每个元素的每个属性来过滤）。uib-typeahead可以使⽤的属性有：
属性名默认值备注
ng-model⽂本框的值
ng-model-options设置ng-model的选项。⽀持debounce和getterSetter
typeahead-append-to null指定智能提⽰的⽗元素
typeahead-append-to-body false智能提⽰内容放在 $body中，⽽不是它的⽗元素中
typeahead-editable true为true时⽂本框的值可以任意输⼊，为false时⽂本框的值只能从智能提⽰列表中选取
typeahead-focus-first true智能提⽰列表中的第⼀个值是否获取焦点
typeahead-focus-on-select true从智能提⽰列表中选中值后，⽂本框是否获取焦点
typeahead-input-formatter undefined选取值后格式化⽂本框内容
p绑定⼀个变量，表⽰智能提⽰列表是否展开
p绑定⼀个变量，表⽰匹配项是否异步获取
typeahead-min-length1触发智能提⽰的最⼩输⼊字符数。必须⼤于等于0
p绑定⼀个变量，表⽰没有到匹配项时的处理⽅式
typeahead-on-select($item,
$model, $label, $event)
null从列表中选中值后的回调函数。如果选中动作不是⽤户触发的，$event则为undefined
typeahead-popup-template-url uib/template/typeahead/typeahead-popup.html
typeahead-select-on-blur false⽂本框失去焦点时，选中当前⾼亮的匹配项typeahead-select-on-exact false只有⼀个匹配项时⾃动选中
typeahead-show-hint false输⼊内容的前半部分有匹配项时，是否提⽰后半部分
typeahead-template-url uib/template/typeahead/typeahead-match.html
typeahead-wait-ms0输⼊字符后，等待多少毫秒触发智能提⽰在下⾯这个例⼦中，数据的获取是从服务端异步获取的：
1<!DOCTYPE html>
2<html ng-app="ui.bootstrap.demo" xmlns="/1999/xhtml">
3<head>
4<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
5<link href="/Content/bootstrap.css" rel="stylesheet"/>
6<title></title>
7
8<script src="/Scripts/angular.js"></script>
9<script src="/Scripts/ui-bootstrap-tpls-1.3.2.js"></script>
10<script>
11
12 dule('ui.bootstrap.demo', ['ui.bootstrap']).controller('TypeaheadCtrl', function ($scope, $http) {
13 $scope.selected = undefined;
14
15 $Names = function (val) {
16return $('/home/GetNames', {
17 params: {
18 name: val
19 }
20 })
21//.success(function (data, status, config, headers) {
21//.success(function (data, status, config, headers) {
22// return data;
23//});
24 .then(function (response) {
25return response.data;
26 });
27 };
28 });
29</script>
30
31</head>
32<body>
33<div ng-controller="TypeaheadCtrl">
34<input type="text" ng-model="selected" uib-typeahead="n.name for n in getNames($viewValue)" typeahead-loading="loadingLocations" typeahead-no-results="noResults" class="form-control">
35<i ng-show="loadingLocations" class="glyphicon glyphicon-refresh"></i>
36<div ng-show="noResults">
37<i class="glyphicon glyphicon-remove"></i> No Results Found
38</div>
39</div>
40</body>
41</html>
需要注意的⼀点是：getNames()⽅法要返回⼀个promise，并且$http返回的promise要⽤.then()来处理，⽽不能⽤.success()来处理。此处有个疑问，既然.then()和.success()都是返回⼀个promise，为什
么使⽤.success 这是⼀个官⽅的例⼦，⽤来展⽰如何使⽤typeahead-template-url：
1<!DOCTYPE html>
2<html ng-app="ui.bootstrap.demo" xmlns="/1999/xhtml">
3<head>
4<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
5<link href="/Content/bootstrap.css" rel="stylesheet"/>
6<title></title>
7
为什么使用bootstrap?8<script src="/Scripts/angular.js"></script>
9<script src="/Scripts/ui-bootstrap-tpls-1.3.2.js"></script>
10<script>
11
12 dule('ui.bootstrap.demo', ['ui.bootstrap']).controller('TypeaheadCtrl', function ($scope, $http) {
13 $scope.selected = undefined;
14
15 $scope.statesWithFlags = [{ 'name': 'Alabama', 'flag': '5/5c/Flag_of_Alabama.svg/45px-Flag_of_Alabama.svg.png' }, { 'name': 'Alaska', 'flag': 'e/e6/Flag_of_Alaska.svg/43px-Flag_of_Alaska.svg.png' }, { 'name': 'Arizona', 'flag': '9/9d/Flag_of_Arizona.svg/
16 });
17</script>
18
19</head>
20<body>
21<script type="text/ng-template" id="customTemplate.html">
22 <a>
23 <img ng-src="/wikipedia/commons/thumb/{{del.flag}}" width="16">
24 <span ng-bind-html="match.label | uibTypeaheadHighlight:query"></span>
25 </a>
26</script>
27<div ng-controller="TypeaheadCtrl">
28<input type="text" ng-model="selected" uib-typeahead="state as state.name for state in statesWithFlags | filter:{name:$viewValue}" typeahead-template-url="customTemplate.html" class="form-control">
29</div>
30</body>
31</html>
模板中的match表⽰智能提⽰列表中每⼀个匹配的选项，包含3个属性：id,label,model。label是绑定到列表中的每⼀项的⽂本，即state as state.name for state in statesWithFlags | filter:{name:$viewValue}中的state.na 效果是这样：
⽬录：
AngularJs的UI组件ui-Bootstrap分享（⼀）
AngularJs的UI组件ui-Bootstrap分享（⼆）——Collapse
AngularJs的UI组件ui-Bootstrap分享（三）——Accordion
AngularJs的UI组件ui-Bootstrap分享（四）——Datepicker Popup
AngularJs的UI组件ui-Bootstrap分享（五）——Pager和Pagination
AngularJs的UI组件ui-Bootstrap分享（六）——Tabs
AngularJs的UI组件ui-Bootstrap分享（七）——Buttons和Dropdown
AngularJs的UI组件ui-Bootstrap分享（⼋）——Tooltip和Popover
AngularJs的UI组件ui-Bootstrap分享（九）——Alert
AngularJs的UI组件ui-Bootstrap分享（⼗）——Model
AngularJs的UI组件ui-Bootstrap分享（⼗⼀）——Typeahead
AngularJs的UI组件ui-Bootstrap分享（⼗⼆）——Rating
AngularJs的UI组件ui-Bootstrap分享（⼗三）——Progressbar
AngularJs的UI组件ui-Bootstrap分享（⼗四）——Carousel
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论