Not able to get data using query function in select2 and angularjs

Question

I am implementing jQuery select2 in angularjs.

Html:

<input type="hidden" ng-model="multiselect" style="width:300px;" dev >

id  {{multiselect.id}}    // want  to print  selected items id

text  {{multiselect.text}}   //want  to print  selected items   text

Directive code

app.directive('dev',[function(AutoCompleteService) {
return {
    restrict: 'A',
    link: function(scope, elem, attr, ctrl) {

          $(elem).select2(
                {
                    minimumInputLength:1,
                multiple:true,  

                query:function(query)
                 {
                    var data={results:[]};
                   console.log("input string"+query.term);  
                  data= scope.getmultiselectresult(query.term);  
                console.log("Data"+data.results.length);//  nothing  is  return ..print  length 0
               for(var c=0;c<data.results.length;c++)
                   {
                    console.log("text"+scope.data.results.text+"id"+scope.data.results.id);
                   }

                query.callback(data);
             }
        });
    }
};}]);

Controller code

 $scope.getmultiselectresult = function(term) {
    console.log("in controller getmultiselectresult..term" + term);
    var results = [];
    $http({
        url : "rest/getMultiSelect",
        method : "GET",
        params : {
            term : term
        }
    }).success(function(data) {

        console.log("data.length" + data.length + "data" + data); //fetches data correctly

        for (var i = 0; i < data.length; i++) {
            $scope.data.results.push({
                id : data[i].id,
                text : data[i].text
            });
            console.log("id " + results[i].id + " name" + results[i].text);
        }
    });

    return results;
};

My problem is, I am not able to pass data from controller to directive linker function correctly. And I also want to know how to get selected item's id and text.

Thanks in advance

Can you bundle up a fiddle?

Nicolae Olariu
– Nicolae Olariu

2014-07-02 11:40:40 +00:00
Commented Jul 2, 2014 at 11:40 — Nicolae Olariu
– Nicolae Olariu, Commented Jul 2, 2014 at 11:40
jsfiddle.net/saurabh07/gzF9W/7

sar
– sar

2014-07-02 12:04:30 +00:00
Commented Jul 2, 2014 at 12:04 — sar
– sar, Commented Jul 2, 2014 at 12:04

sar · Accepted Answer · 2014-07-04 11:49:25Z

I could not get expected behaviour using query function..so i tried ajax of select2 and it works for me.

Html Code

<input   type="hidden" id="multiselect"  ng-model="multiselect" style="width:200px;" dev>
<input type="button" value="OK"    class="btn btn-primary"   show>

Directives code

app.directive('show', [ function()

                    {

return {
    restrict : 'A',
    link : function(scope, elem, attr, ctrl) {

        $(elem).click(
                function() {
                    var dataset = $('#multiselect').select2('data');
                    console.log("dataset" + dataset + "dataset"
                            + dataset.length);

                    for (var zz = 0; zz < dataset.length; zz++) {
                        console.log("id" + dataset[zz].id + "text>>"
                                + dataset[zz].text);
                        scope.selectedEmpNo = dataset[zz].id;
                        scope.selectedName = dataset[zz].text;

                    }

                    scope.addRelAdmin(dataset);

                });

    }

};

                    } ]);


app.directive('dev', [ function() {
return {
    restrict : 'A',
    link : function(scope, elem, attr, ctrl) {
        $(elem).select2({
            minimumInputLength : 3,
            multiple : true,
            quietMillis : 1000,
            ajax : {
                url : "rest/getEmployees",
                dataType : 'json',
                data : function(term, page) {
                    return {
                        q : term
                        // search term
                    };
                },

                results : function(data) {
                    var myResults = [];
                    $.each(data, function(index, item) {
                        myResults.push({
                            id : item.personId,
                            text : item.firstName + " " + item.lastName
                        });
                    });
                    return {
                        results : myResults
                    };
                }
            },


        });
    }

   };
 } ]);

Collectives™ on Stack Overflow

Not able to get data using query function in select2 and angularjs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related