I agree with ev, that your problem is that you are creating a new scope
for each button. Using the Controller As syntax should help with scoping.
Ev, maybe you could be a little more tactful in your replies? Some
questions are simple enough to not require plnkrs and being an open forum
it's preferable to foster a welcome environment.
On Wednesday, March 26, 2014 11:19:17 AM UTC-6, ev...@vfiles.com wrote:
>
> 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 angular+unsubscr...@googlegroups.com.
To post to this group, send email to angular@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
