AngularJS Dropdown Directive Set Selected Item Through Two Way Binding

Question

I have an angularjs dropdown directive. I want to be able to pass the id of the item I want to be selected as an attribute of the directive. Something like this:

<dropdown selected-item-id="ctrl.selectedItemId"></dropdown>

I implemented this and it's not working. If I display the value of itemId on the directive code, I can see the right value, but the dropdown selection does not update. Here's the relevant code:

(function () {
	'use strict';
	var dropdown = function ($state, service) {
		return {
			restrict: 'E',
			replace: true,
			templateUrl: '/dropdown.html',
			scope: {
			    selectedItemId:"="
			},
			link: function (scope, elem, attr) {
              service
                .getItems()
                .then(function (items) {
                    scope.items = items;
                 });
			}
		};
	};
	dropdown.$inject = ['$state', 'service'];
	angular.module('app').directive('dropdown', dropdown);
})();

<select class="form-control"
        ng-model="selectedItemId"
        ng-options="item.id as item.name for item in items">
    <option value="" selected disabled>Select an item</option>
</select>

Like I said, if I display the selectedItemId on the directive template (e.g. as one of the options) I see the right id value, however the dropdown selection doesn't change.

Any thoughts?

EDIT: I had a typo (happened when typing the code, the actual code on my editor is correct) on the dropdown's property, item-id to selected-item-id

Martin Skec · Accepted Answer · 2015-05-14 21:03:33Z

2

You are not binding selected value to item-id as you think according to your html code. You are binding selected value to selected-item-id.

Try changing your html to this:

 <dropdown selected-item-id="ctrl.selectedItemId"></dropdown>

answered May 14, 2015 at 21:03

Martin Skec

1282 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

jarz Over a year ago

Thanks Martin for catching that. It was actually a typo on the code here but not on my project. I fixed it on the question.

gvazq · Accepted Answer · 2015-05-16 02:38:08Z

1

Looks like you might be having a race condition on the $digest cycle. If you call $apply() from your service callback on the first version of your code it should work. However, you will have the side effect that from time to time angular will complain about an $apply being already in progress so the second version of your code should do the trick.

answered May 16, 2015 at 2:38

gvazq

214 bronze badges

Comments

jarz · Accepted Answer · 2015-05-15 00:24:02Z

I'm not sure why it wasn't working like I had it, but I made some changes an now it works ok. Here's what I did (the explanation is included as comments on the source code):

//Here I use the selectedItem bidirectional binding on the .then of my service call
//to get the id of the items that's supposed to be selected.
//Then, I filter the array of items using that id, so I get the actual object that matches the id.
//Finally, I set the scope object "selectedItem" to that object I just got. 
//The "selectedItem" object is what's bound to the select via ng-model so that does the selection.
(function () {
	'use strict';
	var dropdown = function ($state, service) {
		return {
			restrict: 'E',
			replace: true,
			templateUrl: '/dropdown.html',
			scope: {
			    selectedItemId:"="
			},
			link: function (scope, elem, attr) {
              service
                .getItems()
                .then(function (items) {
                    scope.items = items;
                var selectedItem = $filter('filter')(items, { id:     scope.selectedItemId })[0];
				        scope.selectedItem = selectedItem;
                 });
			}
		};
	};
	dropdown.$inject = ['$state', 'service'];
	angular.module('app').directive('dropdown', dropdown);
})();

<!--Here I replaced the ng-model to use an object rather than an id and did the same on the ng-options -->
<select class="form-control"
        ng-model="selectedItem"
        ng-options="item as item.name for item in items">
    <option value="" selected disabled>Select an item</option>
</select>

Collectives™ on Stack Overflow

AngularJS Dropdown Directive Set Selected Item Through Two Way Binding

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related