CODEWITHSUNDEEP
javascriptangularjstwitter-bootstrapselect
backtrack
backtrack

Reputation: 8144

Angularjs select2 Ajax binding

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

Upvotes: 4

Views: 2377

Answers (2)

arman1991
arman1991

Reputation: 1166

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.

Upvotes: 1

Eugene P.
Eugene P.

Reputation: 2625

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
            };
        },

Upvotes: 0

Related Questions