angular-bootstrap-select icon indicating copy to clipboard operation
angular-bootstrap-select copied to clipboard

"track by" doesn't work

Open caseyjhol opened this issue 9 years ago • 4 comments

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.

caseyjhol avatar Jan 23 '15 09:01 caseyjhol

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 avatar Feb 14 '15 19:02 latata

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.

latata avatar Feb 14 '15 19:02 latata

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.

caseyjhol avatar Jul 30 '15 23:07 caseyjhol

nicela

mariusstaicu avatar Nov 29 '15 08:11 mariusstaicu