使用 angular-ui-select 和 angular 种子项目

Question

我从 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 }
 ];
}]);

附件是我目前看到的照片。不知道为什么显示不正确。

Answer 1

这是一个 css 问题。信不信由你。您需要添加 bootstrap 3:

 <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.css">

使用 angular-ui-select 和 angular 种子项目

Using angular-ui-select with angular seed project

javascript

angularjs

angular-ui

angular-ui-select

angular-seed