我从https://github.com/angular/angular-seed创建了一个基础项目,我正在尝试使用 angular-ui-select 向该项目添加下拉菜单。我安装了 angular-ui-select 并将 select.js 和 select.css 添加到我的 index.html 文件中。还安装了 Angular-sanitize。
我的 view1.html 看起来像:
<p>This is the partial for view 1.</p>
<ui-select ng-model="vm.person.selected" style="min-width: 300px;">
<ui-select-match placeholder="Select a person in the list or search his name/age...">{{$select.selected.name}}</ui-select-match>
<ui-select-choices repeat="person in vm.people">
<div ng-bind-html="person.name | highlight: $select.search"></div>
<small>
email: {{person.email}}
age: <span ng-bind-html="''+person.age | highlight: $select.search"></span>
</small>
</ui-select-choices>
</ui-select>
我的控制器看起来像:
'use strict';
angular.module('myApp.view1', ['ngRoute','myApp.testDirective', 'ngSanitize', 'ui.select'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/view1', {
templateUrl: 'view1/view1.html',
controller: 'View1Ctrl',
controllerAs: 'vm'
});
}])
.controller('View1Ctrl', [function() {
var vm = this;
vm.people = [
{ name: 'Adam', email: 'adam@email.com', age: 10 },
{ name: 'Amalie', email: 'amalie@email.com', age: 12 },
{ name: 'Wladimir', email: 'wladimir@email.com', age: 30 },
{ name: 'Samantha', email: 'samantha@email.com', age: 31 },
{ name: 'Estefanía', email: 'estefanía@email.com', age: 16 },
{ name: 'Natasha', email: 'natasha@email.com', age: 54 },
{ name: 'Nicole', email: 'nicole@email.com', age: 43 },
{ name: 'Adrian', email: 'adrian@email.com', age: 21 }
];
}]);