At the moment, I am facing an issue with multiple dropdown directives that are using the same array of values. Whenever a selection is made in one dropdown, it updates the selected value in all other dropdowns. How can I ensure that each dropdown has a unique selection?
My current workaround involves setting ng-model="ctrl.ngModel", but this prevents me from accessing the selected value in the dropdown.
dropdown.html
<div>
<ui-select name='' ng-model="ctrl.ngModel.selected" theme="bootstrap" class='expiry admin-expiry'
append-to-body='true'
reset-search-input='true'
on-select="ctrl.update()">
<ui-select-match placeholder="">{{$select.selected.value}}</ui-select-match>
<ui-select-choices repeat="choice in ctrl.choices | filter: $select.search"
position='down'>
<span ng-bind-html="ctrl.trustAsHtml(choice.value)"></span>
</ui-select-choices>
</ui-select>
</div>
controller.js
function ColDropdownDirective() {
return {
restrict: 'EA',
scope: {
ngModel: '=',
choices: '='
},
controller: ['FxoUtils', function(_) {
var ctrl = this;
this.trustAsHtml = function(value) {
return _.trustAsHtml(value);
};
this.update = function() {
console.log(ctrl.ngModel.selected);
};
}],
controllerAs: 'ctrl',
bindToController: true,
templateUrl: 'js/fxo/admin/thresholdconfig/common/common.col.dropdown.html'
};
}