I set up a new project using the starter template from https://github.com/angular/angular-seed and now I'm attempting to integrate angular-ui-select for dropdown menus. I've added select.js and select.css files to my index.html as well as installed Angular-sanitize.
This is how my view1.html file looks:
<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 here's what 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: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e68782878ba6838b878f8ac885898b">[email protected]</a>', age: 10 },
{ name: 'Amalie', email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="53323e323f3a3613363e323a3f7d303c3e">[email protected]</a>', age: 12 },
{ name: 'Wladimir', email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dcabb0bdb8b5b1b5ae9cb9b1bdb5b0f2bfb3b1">[email protected]</a>', age: 30 },
{ name: 'Samantha', email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="34475559555a405c55745159555d581a575b59">[email protected]</a>', age: 31 },
{ name: 'Estefanía', email: 'estefaní<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4e2f0e2b232f2722602d2123">[email protected]</a>', age: 16 },
{ name: 'Natasha', email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="97f9f6e3f6e4fff6d7f2faf6fefbb9f4f8fa">[email protected]</a>', age: 54 },
{ name: 'Nicole', email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="89e7e0eae6e5ecc9ece4e8e0e5a7eae6e4">[email protected]</a>', age: 43 },
{ name: 'Adrian', email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9dfcf9eff4fcf3ddf8f0fcf4f1b3fef2f0">[email protected]</a>', age: 21 }
];
}]);
This image shows the issue I'm facing with the display right now: https://i.sstatic.net/r2MxK.png