javascriptangularjsui-select2ui-select

programmatically selected option is not highlighted in ui-select


angular version: AngularJS v1.3.6 http://github.com/angular-ui/ui-select : Version: 0.8.3

var p1 = { name: 'Ramesh', email: 'Ramesh@email.com', age: 99 };

   $scope.people = [
            { name: 'Amalie',    email: 'amalie@email.com',    age: 12 },
            { name: 'Wladimir',  email: 'wladimir@email.com',  age: 30 },
            { name: 'Samantha',  email: 'samantha@email.com',  age: 31 },
            { name: 'Estefanía', email: 'estefanía@email.com', age: 16 },
            { name: 'Natasha',   email: 'natasha@email.com',   age: 54 },               
            { name: 'Adrian',    email: 'adrian@email.com',    age: 21 },
            p1
        ];

 $scope.people.selected = p1 ;

html:

  <ui-select  class="full-width-select select" ng-model="people.selected" theme="select2">
                <ui-select-match  allow-clear="false">{{$select.selected.name}}</ui-select-match>
                <ui-select-choices repeat="person in people | filter:$select.search">
                    <div ng-bind-html="person.name | highlight: $select.search"></div>
                </ui-select-choices>
            </ui-select>

Issue is When p1 is selected programatically the

p1 object is not highlighted in the ui-select drop down.

Output is:

enter image description here

http://plnkr.co/edit/3mrECwGJbz2UYcrDiCha?p=preview

enter image description here


Solution

  • This is due to the following change in AngularJS 1.3.1:

    $observe: check if the attribute is undefined
    

    Ui-select uses $observe to set a default value for resetSearchInput:

    attrs.$observe('resetSearchInput', function() {
      var resetSearchInput = scope.$eval(attrs.resetSearchInput);
      $select.resetSearchInput = resetSearchInput !== undefined ? resetSearchInput : true;
    });
    

    But since the change noted above and since resetSearchInput is undefined, the observer function will never get executed.

    To solve it for now add the following attribute to your ui-select element:

    reset-search-input="'false'"
    

    Demo: http://plnkr.co/edit/M0pXrN3n6CBjjoJXS4df?p=preview