I'm trying to implement a little demo of buttons, where I can eventually
move between buttons using the arrow keys. I'm a little confused about the
scoping though. On my controller I define an array of buttons I add to the
scope. I iterate through this array in the html.
<button class="button" ng-class="{ selected: button.id ==
selectedButtonId }" ng-click="toggleSelection()" ng-repeat="button in
buttons" ng-controller="ItemController">
{{ button.label }}
</button>
I also set a selectedButtonId in that main controller, which keeps track of
which button is selected. I set this to the first button label. When I
load the app, the first button is highlighted as I would suspect because
selectedButtonId is the id for that button. When I click on another
button, it calls toggleSelection() in the ItemController and updates
selectedButtonId. This causes the new button to be highlighted.
$scope.toggleSelection = function() {
$scope.selectedButtonId = $scope.button.id;
};
My problem is none of the other buttons are unhighlighting. I figured that
since I was changing $scope.selectedButtonId, it would cause all the
buttons to change based on selectedButtonId. I'm obviously not
understanding scope correctly. When I set selectedButtonId in the
ItemController does that suddenly become unique to the scope of that button
and I haven't really changed it for all the other buttons? Or have I
modified it in the "global" or parent scope, but the buttons haven't been
told to reevaluate their class? I've tried calling $scope.$apply() to make
it update the other buttons, but this causes an error because the event is
called from an angular context and should already be updated. What am I
misunderstanding?
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
