Angularjs select2 Ajax binding

Question

I am using AngularJs + Select2. I am trying to get the data from remote. Below is my code

HTML :

<div class="col-md-4 left">
  <input type="text" style="width:300px" ui-select2="multi" ng-model="multi2Value" multiple="multiple" />
 </div>

JS : [UPDATED]

 $scope.multi = {
            ajax: {
                headers: { 'Content-Type': 'application/json' },
                url: "http://localhost:63591/Lookup?lookup=Lookup&key=acc",
                data: function (term, page) {
                    return {}; 
                },
                results: function (data, page) {             
                    console.log(data);
                    return {results: data.LookupValue};
                }
            }

And my response will be

{ "LookupValue" : [ "AAAA","BBBB","CCC" ] }

But in the console i am seeing the response. But it is not loading into the select dropdown.

What went wrong in my code. Can anyone plz help me ? Thanks

just simply return data.lookupvalue rather than an object with result property. return data.LookupValue; — harishr
– harishr, Commented Dec 8, 2014 at 10:44

arman1991 · Accepted Answer · 2014-12-12 08:22:44Z

1

I think that you must your response save in some scope variable like $scope.listLookup and return it in your ajax, and after this step, try to bind it in HTML like:

<select ui-select2 ng-model="multi2Value" data-placeholder="Pick a Lookup">
    <option value=""></option>
    <option ng-repeat="lookup in listLookup " value="{{lookup.value}}">{{lookup.text}}</option>
</select>

where lookup is every item in your list if items of listLookup, and value and text are some dummy properties of lookup...

Take look on this article, hope that you understand the idea.

answered Dec 12, 2014 at 8:22

arman1991

1,1661 gold badge18 silver badges28 bronze badges

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

Comments

Eugene P. · Accepted Answer · 2014-12-05 17:58:07Z

0

instead of

return {results: data};

use

 return {results: data.LookupValue};

It might be either array of primitive types

[string,string,string]

or array of objects

[{},{},{}]

as well as :

data: function (term, page) {
            return {
                q: term, //search term
                page: page // page number
            };
        },

edited Dec 5, 2014 at 17:58

answered Dec 5, 2014 at 17:42

Eugene P.

2,63521 silver badges23 bronze badges

Collectives™ on Stack Overflow

Angularjs select2 Ajax binding

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related