angular-bootstrap-select
angular-bootstrap-select copied to clipboard
"track by" doesn't work
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.
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?
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.
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.
nicela