javascriptjqueryangularjsjquery-chosenangular-chosen

Angular js + Chosen Plugin + Set the value as Selected in dropdown


I have implement the chosen plugin in the Angular.js with the reference of this link

I am able to fetch the value, Now I want to the selected value as pre selected in the chosen dropdown.

Can any one tell me the easy way to do this. Sample Code :

<select  name="SelectedName" id="SelectedName" data-placeholder="Choose a Name..." chosen 
        ng-model="Info.SelectedNameModel" 
        ng-options="jd.Name for jd in Info.List" 
        class="form-control chosen-select"></select>

In Js code

.directive('chosen', function() {
    var linker = function (scope, element, attr) {
        // update the select when data is loaded
        scope.$watch('Info.List', function (oldVal, newVal) {
            element.trigger('chosen:updated');
        });

        element.chosen();
    };

    return {
        restrict: 'A',
        link: linker
    };
});

Sample list : {"Name":"PQR"},{"Name":"LMN"}

In Database I am storing the only value as 'LMN'

So when the dropdown loads I want to show as LMN selected.

Let me know If any one has already done this.


Solution

  • Updated the ng-options as jd.Name for jd in Info.List track by jd

    You can change into this:

    <select  name="SelectedName" id="SelectedName" data-placeholder="Choose a Name..." chosen 
            ng-model="Info.SelectedNameModel" 
            ng-options="jd.Name for jd in Info.List track by jd" 
            class="form-control chosen-select"></select>