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

Question

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: '[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 }
  ];

}

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>

Claies · Accepted Answer · 2016-02-09 03:03:19Z

2

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

answered Feb 9, 2016 at 3:03

Claies

22.4k4 gold badges56 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

gcoleman0828 Over a year ago

Interesting Claies. I knoew about plunkers requirements, but i must have completely forgotten to add the vm back in. Thank you for updating it.

amanuel2 Over a year ago

Long time no see... @Claies

Shashank · Accepted Answer · 2016-02-08 06:09:30Z

0

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: '[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 }
    ];
    $scope = vm;
}

answered Feb 8, 2016 at 6:09

Shashank

2,1002 gold badges21 silver badges40 bronze badges

10 Comments

gcoleman0828 Over a year ago

Thank you for the response @Shashank I thought using the controller as syntax with an alternative to using $scope? I'm guessing that is incorrect? Also, I have read a few times now that $scope was going away in a new version of Angular? Is that false?

Shashank Over a year ago

There is no problem in using controller as syntax. But there should be a way for $scope to inject so as to exploit dependency-injection, otherwise how would the controller know the scope and how the models would bind between controllers and model. I don't know whether scopes are going away or not. Need to research it out.

gcoleman0828 Over a year ago

-I see what you are saying about 'how does it know', but since I'm new to angular, I guess based on everything I have been reading, the 'controller as' syntax is just that, syntactical sugar. usually, in my experience, syntactical sugar just means shorter or easier to read code "without" loss of functionality. Here are some examples of what I have been reading: toddmotto.com/digging-into-angulars-controller-as-syntax infragistics.com/community/blogs/dhananjay_kumar/archive/2015/… Thoughts??

Claies Over a year ago

setting $scope = vm isn't something that makes sense with the newer releases of angular 1.3+. In fact, using $scope = vm can cause unexpected complications with the automatic scope inheritance in angular. It was a workaround before ControllerAs was added, and shouldn't be used.

Claies Over a year ago

the $scope service isn't deprecated in angular 1.x, it merely has been given an alternative format to provide for easier transition to angular 2. Angular 2 is a complete rewrite from the ground up, and none of the existing features operate in the same manner. You can still inject $scope when necessary (broadcasts, for example), but using ControllerAs gives you the option not to use it for every situation.

|

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

10 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

10 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related