AngularJS changing class with function

Question

I have an Agular app where I have a list of US states layout out as a UL in a "block" fashion.

Now, when the states variable has an entry, the class on the particular state should be active (showing in a maroon color). I'm setting the class using a function because you cannot us the in clause. The code DOES go into the function and it DOES return true when the state == 'TX', however, the class is not being applied.

Template:

<div ng-controller="MyCtrl" id="state_scroller">
    <section class="states">
        <ul>
            <li ng-repeat="state in statesList" 
                ng-class="{true: 'active', false: ''}[selectedState($index)]"  
                id="st_{{state.id}}">{{state.id}}</li>
        </ul>
    </section>
</div>

What am I doing wrong here? Here's what the rendered code looks like in the Chrome debugger:

<div ng-controller="MyCtrl" id="state_scroller" class="ng-scope">
    <section class="states">
        <ul>
            <!-- ngRepeat: state in statesList -->
            <li ng-repeat="state in statesList" 
                ng-class="{true: 'active', false: ''}[selectedState($index)]" 
                id="st_AK" class="ng-scope ng-binding">AK</li>
            <!-- end ngRepeat: state in statesList -->
   <!-- snipped some -->
            <li ng-repeat="state in statesList" 
                ng-class="{true: 'active', false: ''}[selectedState($index)]" 
                id="st_TN" class="ng-scope ng-binding">TN</li>
            <!-- end ngRepeat: state in statesList -->
            <li ng-repeat="state in statesList" 
                ng-class="{true: 'active', false: ''}[selectedState($index)]" 
                id="st_TX" class="ng-scope ng-binding">TX</li>
            <!-- end ngRepeat: state in statesList -->
            <li ng-repeat="state in statesList" 
                ng-class="{true: 'active', false: ''}[selectedState($index)]" 
                id="st_UT" class="ng-scope ng-binding">UT</li>
            <!-- end ngRepeat: state in statesList -->
   <!-- snipped rest -->
            <!-- end ngRepeat: state in statesList -->
        </ul>
    </section>
</div>

dave · Accepted Answer · 2014-06-30 22:14:49Z

1

$scope.selectedState = function(id) {
    var x = false;
    angular.forEach($scope.states, function (state, key2) {
        if (state.id == $scope.statesList[id].id) {
            x = true;
        }
    })
    return x;
};

You have to check everything, THEN return if you found it. Right now if the first one doesn't match, you exit out of the foreach. And then you don't return from the selectedState function (the foreach has it's own function, which returns back to the selectedState function, which then doesn't return anything.

http://jsfiddle.net/3u375/17/

answered Jun 30, 2014 at 22:14

dave

65.1k6 gold badges81 silver badges98 bronze badges

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

2 Comments

Andrew Burgess Over a year ago

I don't believe that the angular forEach implementation has early termination like some other libraries.

MB34 Over a year ago

Thanks for that one. Maybe they should add a break clause?

Collectives™ on Stack Overflow

AngularJS changing class with function

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related