Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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: '[email protected]', age: 99 };

   $scope.people = [
            { name: 'Amalie',    email: '[email protected]',    age: 12 },
            { name: 'Wladimir',  email: '[email protected]',  age: 30 },
            { name: 'Samantha',  email: '[email protected]',  age: 31 },
            { name: 'Estefanía', email: 'estefaní[email protected]', age: 16 },
            { name: 'Natasha',   email: '[email protected]',   age: 54 },               
            { name: 'Adrian',    email: '[email protected]',    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

like image 660
praveenpds Avatar asked Mar 22 '26 10:03

praveenpds


1 Answers

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

like image 71
tasseKATT Avatar answered Mar 24 '26 23:03

tasseKATT



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!