Angular UI Select2 initialization fails

Question

I'm failing to get Angular UI Select2 module to work. Simplest example I could think of is below, derived from AngularJS tutorial.

Directions on Github project (https://github.com/angular-ui/ui-select2) state, that I only need to include jQuery, Angular and Angular UI's select2.js. But then I get only errors: TypeError: Object [object Object] has no method 'select2'

Including Select2 there is no errors, but I get select tag's placeholder text as a link, then two empty text input fields a regular select dropdown. When I choose something in select dropdown, it's value replaces the placeholder text. Clicking the link empties the page, so does trying to input something to text boxes.

I have tested with multiple browsers and platforms, using Yeoman's generator-angular as a base. I tried a much older version of Angular UI's select2.js, but the behaviour did not change. Searching did not turn up anything relevant, and working examples I found are prior to Angular UI's breakup into modules.

What I am doing wrong or is this a bug?

html:

<!doctype html>
<html ng-app="anguish">
<head>
<script type="text/javascript" src="components/jquery/jquery.js"></script>
<script src="components/angular/angular.js"></script>
<script type="text/javascript" src="components/select2/select2.js"></script>
<script type="text/javascript" src="components/angular-ui-select2/src/select2.js"></script>
<script type="text/javascript" src="foo.js"></script>
</head>
<body>
<div>
<select ui-select2 ng-model="select2" data-placeholder="Pick a number">
    <option value=""></option>
    <option value="one">First</option>
    <option value="two">Second</option>
    <option value="three">Third</option>
</select>
</div>
</body>
</html>

foo.js:

'use strict';

angular.module('anguish', ['ui.select2'])
.controller('MainCtrl', function ($scope) {
    $scope.select2 = null;
    $scope.select2Options = {
        allowClear:true
    };
});

holographic-principle · Accepted Answer · 2013-06-11 19:09:31Z

4

Try including select2.js before angular.js if you are getting 'has no method select2'.

Also, you will need the select2.css file. It's not going to style itself magically :)

answered Jun 11, 2013 at 19:09

holographic-principle

19.7k10 gold badges48 silver badges62 bronze badges

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

1 Comment

jarpineh Over a year ago

Duh. Well. Of course. Thank you. I could have sworn I had some CSS there at some point, but that probably was from Angular UI's complete package... Live and learn. I'll try to get this changed in project's Github directions.

Collectives™ on Stack Overflow

Angular UI Select2 initialization fails

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related