You should make a plunkr/jsfiddle before posting here.
You are to be creating a scope and controller for each button and setting
scope.selectedButtonId on each individual scope instead of on a parent
scope, thus never overwriting the previous selectedButtonId. Your template
should look like this instead, with a single parent controller:
<div ng-controller="ButtonsCtrl as ctrl">
<button ng-class="{ selected: button.id == selected }" ng-repeat="button in
buttons" ng-click="ctrl.select(button)" ng-bind="button.label"></button>
</div>
and your controller
module.controller 'ButtonsCtrl', ['$scope', ($scope) ->
select: (btn) -> $scope.selected = btn.id
]
On Tuesday, March 25, 2014 5:09:18 PM UTC-4, Josh Stratton wrote:
>
> 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.
