Search code examples
javascriptangularjsangular-uiangular-ui-selectangular-seed

Using angular-ui-select with angular seed project

I created a base project from https://github.com/angular/angular-seed and I'm trying to use angular-ui-select to add dropdown menus to this project. I installed angular-ui-select and added select.js and select.css to my index.html file. Angular-sanitize is also installed.

My view1.html looks like : 

 <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>

And my controller looks like :

'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: '[email protected]',      age: 10 },
   { name: 'Amalie',    email: '[email protected]',    age: 12 },
   { name: 'Wladimir',  email: '[email protected]',  age: 30 },
   { name: 'Samantha',  email: '[email protected]',  age: 31 },
   { name: 'Estefanía', email: 'estefaní[email protected]', age: 16 },
   { name: 'Natasha',   email: '[email protected]',   age: 54 },
   { name: 'Nicole',    email: '[email protected]',    age: 43 },
   { name: 'Adrian',    email: '[email protected]',    age: 21 }
 ];
}]);

Attached is a pic of what I'm currently seeing. Not sure why it's not displaying properly.enter image description here

Solution

  • It's a css issue. Believe or not. You need to add bootstrap 3:

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