Menu
I have the following shuttle boxes directive:
<shuttle-boxes ng-options="item for item in itemList" ng-model="myModel" />
My template looks like this:
template: '<div class="shuttle-boxes">' +
'<select multiple="multiple" class="shuttle-boxes-left"></select>' +
'<button class="shuttle-boxes-btn" type="button"><i class="icon icon-arrow-right"></i></button>' +
'<button class="shuttle-boxes-btn" type="button"><i class="icon icon-arrow-left"></i></button>' +
'<select multiple="multiple" class="shuttle-boxes-right"></select>' +
'</div>'
What I want to do is take the ng-options repeater from <shuttle-boxes> and use it to populate <select class="shuttle-boxes-left">.
The way I am trying to do it that isn't working is simply copying over the ng-options attribute to the select list like so:
var availableList = cElement.find('.shuttle-boxes-left'),
repeater = cAttrs.ngOptions;
availableList.attr('ng-options', repeater);
Here is the fiddle: http://jsfiddle.net/dkrotts/tHTAY/1/
What am I doing wrong?
475
ng-options is the directive which is designed specifically to populate the items of a dropdown list. One major advantage using ng-options for the dropdown is, it allows us to pass the selected value to be an object. Whereas, using ng-repeat the selected value can only be string.
Use ng-init to set default value for ng-options . Save this answer.
Definition and UsageThe ng-disabled directive sets the disabled attribute of a form field (input, select, or textarea). The form field will be disabled if the expression inside the ng-disabled attribute returns true. The ng-disabled directive is necessary to be able to shift the value between true and false .
The ngInit directive allows you to evaluate an expression in the current scope. This directive can be abused to add unnecessary amounts of logic into your templates. There are only a few appropriate uses of ngInit : aliasing special properties of ngRepeat , as seen in the demo below.
I suggest you only pass the itemList to the directive (and myModel) and put the ng-options inside your template:
<shuttle-boxes items="itemList" ng-model="myModel"></shuttle-boxes>
Directive:
myApp.directive('shuttleBoxes', function($timeout) {
return {
restrict: 'E',
scope: { items: '=', ngModel: '='},
template: '<div class="shuttle-boxes">' +
'<select multiple="multiple" class="shuttle-boxes-left"
ng-options="item for item in items" ng-model="ngModel"></select>' +
'<button class="shuttle-boxes-btn" type="button">' +
'<i class="icon icon-arrow-right"></i></button>' +
'<button class="shuttle-boxes-btn" type="button">' +
'<i class="icon icon-arrow-left"></i></button>' +
'<select multiple="multiple" class="shuttle-boxes-right"></select>' +
'</div>',
replace: true
}
});
Fiddle.
113
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
