我正在尝试使用位于GitHub 上的AngularJS ui-select 选择 HTML 控件。出于某种原因,我可以在使用 $scope 语法时选择项目,但在使用 Controller As 语法时不能。我正在尝试使用 Controller 作为语法的 plunker 位于此处。我不确定我错过了什么,特别是因为 $scope 语法完美运行。
我没有报告任何错误。这是 plunker 中的一个片段。
控制器
var app = angular.module('demo', ['ngSanitize', 'ui.select']);
app.controller("MainCtrl", MainCtrl);
function MainCtrl()
{
var controller = this;
controller.person = {};
controller.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 }
];
}
索引.html
<body ng-controller="MainCtrl as vm">
<h3>Select2 theme</h3>
<p>Selected: {{vm.person.selected}}</p>
<ui-select ng-model="person.selected.name" theme="select2" ng-disabled="disabled" 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 | propsFilter: {name: $select.search, age: $select.search}">
<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>