Set selected value in Select2 using angularjs

Question

I have a Drop down in my Anjularjs Application implemented using 'ui.select2'

I had initialized it as below

  <input type="text" ng-model="objCas.iProjectId" id=" iprojectid" ui-select2="iProjectIdOption" />

And My Js Implementation is getting data from remote server with pagination and filter

  var app = angular.module('CASApp', ['ui.select2', 'checklist-model']);
        app.controller('CASController', function ($scope, $http) {


            $scope.iProjectIdOption = {
                placeholder: "Click to choose the Project...",
                allowClear: true,
                initSelection: function (element, callback) {

                },
                ajax: {
                    url: "/Prj/dummy/Ajaxlist",
                    quietMillis: 0,
                    type: "POST",
                    data: function (term, page) {
                        return {
                            q: term,
                            page: page,
                            listType: "ProjectDetails"
                        }; // query params go here
                    },
                    results: function (data, page) { // parse the results into the format expected by Select2.
                        // since we are using custom formatting functions we do not need to alter remote JSON data
                        var more = (page * 30) < data.total_count; // whether or not there are more results available
                        return {
                            results: $.map(data.items, function (item) {
                                return {
                                    text: item.text,
                                    id: item.id
                                }
                            }),
                            more: more
                        }
                    },
                    cache: true
                }
            }
}
}

Everything works fine .I am able to use all the features and post the values also. But problem is with setting the already selected values at time of edit

Tried

    $Scope.objCas.iProjectId= {"text":"2010 / 256 - / dummytext","id":240}    
    $Scope.objCas.iProjectId=2;
    $scope.iProjectId.selected = {"text":"2010 / 256 - / dummytext","id":240}

Basil A. · Accepted Answer · 2019-12-24 10:56:44Z

1

Get the select2 element object and apply the following code:

angular.element("#select2_id").select2('data', { "text": "text", "id": [id]});

edited Dec 24, 2019 at 10:56

answered Dec 24, 2019 at 5:53

Basil A.

1,65112 silver badges28 bronze badges

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

1 Comment

Sreenath Ganga Over a year ago

Working like a charm... Thanks

mehta Pratik · Accepted Answer · 2019-12-23 12:42:47Z

    HTML code: no need of id
    <input type="text" ng-model="objCas.iProjectId" ui-select2="iProjectIdOption" />

    js code:
    use only this for default biniding
    $Scope.objCas.iProjectId= {"text":"2010 / 256 - / dummytext","id":240}  


    example code:
    link: http://embed.plnkr.co/K66Pf0/
    replace script.js file:
    // Code goes here
var myAppModule = angular.module('MyApp', ['ui.select2']);

myAppModule.controller('MyController', function($scope) {
    $scope.select2Options = {
      initSelection: function (element, callback) {

                },
      ajax: {
        url: "./data.json",
        data: function (term, page) {

          return {}; // query params go here
        },
        results: function (data, page) { // parse the results into the format expected by Select2.
          // since we are using custom formatting functions we do not need to alter remote JSON data
          return {results: data}
        }
      }
    }
    console.log("$scope.select2Options-",$scope.select2Options.initSelection);
    $scope.testModel={ "id": 4, "text": "Fourth", "color": "red" }
;
});

    you can view default selected value in dropdown.

Collectives™ on Stack Overflow

Set selected value in Select2 using angularjs

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related