Angularjs ui-select (select2) not working with 'Controller as' syntax not getting selected ite

问题

I'm trying to get a select HTML control working with AngularJS ui-select which is located here on GitHub. For some reason, I am able to get the item selected when using $scope syntax, but not when I use the Controller As syntax. The plunker I am trying to get working with Controller as syntax is located here. I'm not sure what I am missing especially since the $scope syntax works perfectly.

I'm not getting any errors to report. Here is a snippet from what is in 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>

回答1:

After fixing all of your scripts to work with https rather than http (requirement for plunker) and changing ng-model="person.selected.name" to ng-model="vm.person.selected.name", the ControllerAs version works perfectly with no further adjustments.

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

回答2:

The name used as an alias for controller in the HTML should be the same name of the varibale referred in Javascript file too. Plus, you are missing the scope in method MainCtrl(). So here, in your case the variable in JS should be vm. You can refer an example in jsfiddle.

Please find the updated code below.

Javascript

function MainCtrl($scope) {
    var vm = this;

    vm.person = {};
    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 }
    ];
    $scope = vm;
}

来源：https://stackoverflow.com/questions/35260964/angularjs-ui-select-select2-not-working-with-controller-as-syntax-not-gettin

标签

javascript

angularjs

ui-select

angularjs-select2

angular-ui-select