Menu
I forked and edited a plunker from this question
What I'm trying to do is to get the SELECT element (combo box) to update/populate once the data has loaded, but something is not right. I retrieve the data, and it is on the scope of the SELECT element, but the template is not refreshing to show the data. Could someone have a look for me and tell my why the template doesn't refresh?
Thanks very much.
The directive:
app.directive('walkmap', function() {
return {
restrict: 'A',
transclude: true,
scope: { walks: '=walkmap' },
template: '<select data-ng-options="w.postalCode for w in walks"></select>',
link: function(scope, element, attrs)
{
scope.$watch('walks', function (walks) {
scope.walks = walks;
console.log('watch triggered');
console.log(scope.walks);
});
}
};
});
The Index.html:
<body ng-controller="MainCtrl">
<h1>The Walks Data:</h1>
<div walkmap="store.walks"></div>
</body>
999
scope: { walks: '=walkmap' } is already watching.ngOptions you must use ngModel too.here is a plunker:
app.directive('walkmap', function() {
return {
restrict: 'A',
transclude: true,
scope: { walks: '=walkmap' },
template: '<select ng-model="selected" data-ng-options="w.postalCode for w in walks"></select>'
};
});
The problem is with your template. You are yet to define a model which is very important
this should work.
<select data-ng-model="w" data-ng-options="w.postalCode for w in walks"></select>
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
