Initialize select2 in AngularJS

Question

I'm trying to figure out the best way to initialize select2 drop down lists in Angular.JS.

Currently all of my html views that contain forms are using the same controller, this raises the obvious question "what if want a drop down list on a page with a custom controller?"

Can anyone think of a more elegant way to initialize my drop down lists?

Below are my HTML view and Forms Controller.

Form.html

    <div class="form-group">
                        <label class="col-md-3 control-label">Model *</label>
                        <div class="col-md-4">
                            <select ng-model="form.Model" class="form-control DDL">
                                <option ng-repeat="item in modelDDL" value="{{item.id}}">{{item.text}}</option>
                            </select>
                            <span class="help-block">

                            </span>
                        </div>
                    </div>

<script>
    $(".DDL").select2();
</script>

FormsController.js:

     //get values for dropdown lists
        $http.get('http://localhost:2982/api/menu?type=model').
  then(function (response) {
      $scope.modelDDL = response.data;

Enkode · Accepted Answer · 2015-09-26 01:43:08Z

1

I would use https://github.com/angular-ui/ui-select then you can use ng-model and then I would use dependency injection with a service that gets the model data. You can use DI in any controller then.

answered Sep 26, 2015 at 1:43

Enkode

4,8534 gold badges40 silver badges54 bronze badges

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

1 Comment

stanleyxu2005 Over a year ago

ui-select is definitively the best choice out there

Collectives™ on Stack Overflow

Initialize select2 in AngularJS

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