Angularjs插件ui-select的使用方法
Posted xianxiaobo
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Angularjs插件ui-select的使用方法相关的知识，希望对你有一定的参考价值。
最近这个项目中需要用到ui-select下拉框插件来进行对用户的本地搜索并选中，这里分享一下ui-select插件在angularjs中的用法以及注意事项。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link href="https://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"> <link href="https://cdn.bootcss.com/angular-ui-select/0.20.0/select.css" rel="stylesheet"> </head> <body> <div> <div ng-app="app" ng-controller="ctrl"> <ui-select ng-model="selected.value"> <ui-select-match> <span ng-bind="$select.selected.name"></span> </ui-select-match> <ui-select-choices repeat="item in (itemArray | filter: $select.search) track by item.id"> <span ng-bind="item.name"></span> </ui-select-choices> </ui-select> </div> </div> <script src="https://cdn.bootcss.com/angular.js/1.6.9/angular.min.js"></script> <script src="https://cdn.bootcss.com/angular.js/1.6.9/angular-sanitize.min.js"></script> <script src="https://cdn.bootcss.com/angular-ui-select/0.20.0/select.min.js"></script> <script> angular.module(‘app‘,[‘ui.select‘,‘ngSanitize‘]) .controller(‘ctrl‘, [‘$scope‘, function ($scope){ $scope.itemArray = [ {id: 1, name: ‘first‘}, {id: 2, name: ‘second‘}, {id: 3, name: ‘third‘}, {id: 4, name: ‘fourth‘}, {id: 5, name: ‘fifth‘}, ]; $scope.selected = { value: $scope.itemArray[2] }; }]); </script> </body> </html>
需要注意的就是双向绑定的时候传入的是那个选中的对象，而不是选中的value，这个地方有点坑，需要注意一下。
以上是关于Angularjs插件ui-select的使用方法的主要内容，如果未能解决你的问题，请参考以下文章
需要 Node.js 和 Angular 来进行 ui-select