javascript - Angularjs ui-select (select2) 不使用 'Controller as' 语法没有被选中

标签 javascript angularjs ui-select angularjs-select2 angular-ui-select

我正在尝试让一个选择 HTML 控件与位于 here 的 AngularJS ui-select 一起工作。在 GitHub 上。出于某种原因,我能够在使用 $scope 语法时选择项目,但在使用 Controller As 语法时却不能。我正在尝试使用 Controller 作为语法的 plunker 位于 here .我不确定我错过了什么,特别是因为 $scope 语法完美运行。

我没有收到任何要报告的错误。这是 plunker 中的一个片段。

Controller

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 }
  ];

}

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

最佳答案

在修复所有脚本以使用 https 而不是 http(plunker 的要求)并更改 ng-model="person.selected.name "ng-model="vm.person.selected.name",ControllerAs 版本无需进一步调整即可完美运行。

https://plnkr.co/edit/2VtUefWPKdBVaqY1gU66?p=preview

关于javascript - Angularjs ui-select (select2) 不使用 'Controller as' 语法没有被选中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35260964/

相关文章:

angularjs - 如何在 AngularJS 指令中访问全局 js 变量

javascript - Angular 用户界面选择 : Change theme

html - ui-select:如何更改所选元素的背景颜色?

angularjs - ng-submit 在表单提交后给出旧值

angularjs - 如何在解析条件下重定向到 routeProvider 中的另一个页面

Angular-UI UI-Select 停止将事件类应用于第一项的默认行为

javascript - jQuery 代码 .val();不在FF工作

javascript - 使用 jasmine 和 karma 测试 typescript ang Angular 时出现 Angularjs 错误

javascript - 自定义 css 属性或部分 css 变量 shim

javascript - ng2-smart-table如何更改自定义按钮在点击时的显示和隐藏