joaoneto / angular-bootstrap-select

DEPRECATED DON'T USE - Directive to wrap bootstrap-select
105 stars 81 forks source link

"track by" doesn't work #31

Open caseyjhol opened 9 years ago

caseyjhol commented 9 years ago

See http://codepen.io/caseyjhol/pen/dPRXBN

Example:

scope.colors = [{ id: 10, name: 'Red' }, { id: 20, name: 'Green' }, { id: 30, name: 'Blue' }];
<select selectpicker ng-model="selected" ng-options="c.name for c in colors track by c.id"></select>

When an option is selected, the value of the select is set to the object, rather than the track by property. So, selecting "Green" from the list sets the value to {id: 20, name: 'Green' }, instead of 20.

I created a workaround by implementing a trackBy attribute and altering the refresh function.

      function refresh(newVal) {
        $timeout(function () {
          if (attrs.ngOptions && /track by/.test(attrs.ngOptions)) {
            if (attrs.trackBy && newVal) {
              element.val(newVal[attrs.trackBy]);
            } else {
              element.val(newVal);
            }
          }
          element.selectpicker('refresh');
        });
      }
<select selectpicker ng-model="selected" ng-options="c.name for c in colors track by c.id" track-by="id"></select>

This isn't ideal and doesn't work when tracking by $index, but it works for me for now.

latata commented 9 years ago

To fix it you can comment out this line: if (attrs.ngOptions && /track by/.test(attrs.ngOptions)) element.val(newVal); http://codepen.io/anon/pen/EaQQRj I am cursious why this line is in the code?

latata commented 9 years ago

Check my commits. Now it works with both: c.name for c in newColors track by c.id c.id as c.name for c in newColors track by c.id Removing the line caused second example not working.

caseyjhol commented 9 years ago

Using track by and as at the same time is not supported by Angular. See https://docs.angularjs.org/api/ng/directive/ngOptions#-select-as-and-track-by-. These issues have been resolved in my fork - https://github.com/caseyjhol/ng-bootstrap-select.

mariusstaicu commented 8 years ago

nicela