Dynamically Updating a CSS Class using Angular

Question

I have an AngularJS app. I'm trying to learn the right way to do things in Angular and gain a better understanding of the framework. With that in mind, I have an app that looks like the following:

index.html

<!DOCTYPE html>
<html ng-app>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
    <script src="myControllers.js"></script>

    <style type="text/css">
        .init { border: solid 1px black; background-color: white; color: black; }

        .red { background-color:red; color:white; border:none; }
        .white { background-color: white; color: black; border:none; }
        .blue { background-color:blue; color:white; border:none; }
    </style>
</head>

<body ng-controller="StripeListCtrl">
    <select ng-options="stripe.id as stripe.name for stripe in stripes" ng-model="selectedStripe">
        <option value="">Select a Stripe Color</option>
    </select>

    <div ng-class="{{getStripeCss()}}">
        You chose {{selectedStripe.name}}
    </div>
</body>
</html>

mycontrollers.js

function StripeListCtrl($scope) {
    $scope.selectedStripe = null;
    $scope.stripes = [
      { name: "Red", id=2, css: 'red' },
      { name: "White", id: 1, css: 'white' },
      { name: "Blue", id: 5, css: 'blue' }
    ];

    $scope.getStripeCss = function() {
        if ($scope.selectedStripe == null) {
            return "init";
        }
        return $scope.selectedStripe.css;
    }
}

I'm trying to figure out how to dynamically change the DIV element style when a user chooses an option in the drop down. At this time, the getStripeCss function fires. However, selectedStripe is the id of the stripe. Coming from a XAML background, I'm used to having the entire object. While I understand that I could write a utility method that loops through the stripe objects and finds the one with the corresponding ID, this seems fairly manual for this kind of task.

Is there a more elegant approach than writing the utility method as I mentioned? If so, how?

Thank you!

AlwaysALearner · Accepted Answer · 2013-09-17 18:10:03Z

You dont need the function getStripeCss in your $scope at all.

If you want the variable selectedStripe to store an object you need to change ng-options like this:

<select ng-options="stripe.name for stripe in stripes" ng-model="selectedStripe">
    <option value="">Select a Stripe Color</option>
</select>

<div ng-class="{red:selectedStripe.id==2, white:selectedStripe.id==1, 
blue:selectedStripe.id==5}">
    You chose {{selectedStripe.name}}
</div>

However if you want selectedStripe to store a key (like what you are doing currently) and wish to access items inside the stripes array/object without looping over them, you can do something like this:

<select ng-options="key as value.name for (key,value) in stripes" 
ng-model="selectedStripe">
    <option value="">Select a Stripe Color</option>
</select>

<div ng-class="{red:selectedStripe==2, white:selectedStripe==1, 
blue:selectedStripe==5}">
    You chose {{stripes[selectedStripe].name}}
</div>

Change the model:

$scope.stripes = {
    2:{ name: "Red", id:2, css: 'red' },
    1:{ name: "White", id: 1, css: 'white' },
    5:{ name: "Blue", id: 5, css: 'blue' }
};

Collectives™ on Stack Overflow

Dynamically Updating a CSS Class using Angular

index.html

mycontrollers.js

1 Answer 1

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

index.html

mycontrollers.js

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Related