Adjust the class based on the model's value in AngularJS

Question

Adjust the class based on the model's value in AngularJS

items = {'apple', 'banana', 'lemon', 'cat', 'dog', 'monkey', 'tom', 'john', 'baby'}

html

 <div class="variable" ng-repeat="item in items">{{item}} </div>

I am looking to achieve the following:

If the item is apple, banana, lemon, then the variable should be fruit.

If the item is cat, dog, monkey, then the variable should be animal.

If the item is tom, john, baby, then the variable should be human.

Fruit, animal, human are CSS classes.

Your assistance would be greatly appreciated. Thank you!

javascript css angularjs angularjs-ng-repeat

Answer 1

Answer №1

Revise the items that are in an incorrect array format

items = {'apple', 'banana', 'lemon', 'cat', 'dog', 'monkey', 'tom', 'john', 'baby'}

to

items = ['apple', 'banana', 'lemon', 'cat', 'dog', 'monkey', 'tom', 'john', 'baby']

Utilizing `ng-class` is a recommended approach.

Example:

<div ng-repeat="item it items" ng-class="defineClass(item)">{{item}}</div>

Controller:

$scope.items = ['apple', 'banana', 'lemon', 'cat', 'dog', 'monkey', 'tom', 'john', 'baby'];

$scope.defineClass = function(item) {
    switch (item) {
        case 'apple':
        case 'banana':
        case 'lemon':
            return 'fruit'; 
            break;
        case 'cat':
        case 'dog':
        case 'monkey':
            return 'animal'; 
            break;
        case 'tom':
        case 'john':
        case 'baby':
            return 'human'; 
            break;
    }
}

Answer 2

Revise the items that are in an incorrect array format

items = {'apple', 'banana', 'lemon', 'cat', 'dog', 'monkey', 'tom', 'john', 'baby'}

to

items = ['apple', 'banana', 'lemon', 'cat', 'dog', 'monkey', 'tom', 'john', 'baby']

Utilizing `ng-class` is a recommended approach.

Example:

<div ng-repeat="item it items" ng-class="defineClass(item)">{{item}}</div>

Controller:

$scope.items = ['apple', 'banana', 'lemon', 'cat', 'dog', 'monkey', 'tom', 'john', 'baby'];

$scope.defineClass = function(item) {
    switch (item) {
        case 'apple':
        case 'banana':
        case 'lemon':
            return 'fruit'; 
            break;
        case 'cat':
        case 'dog':
        case 'monkey':
            return 'animal'; 
            break;
        case 'tom':
        case 'john':
        case 'baby':
            return 'human'; 
            break;
    }
}

Answer 3

Answer №2

Implement ng-class for dynamic styling.

<div ng-class="{'classname':variable}" ng-repeat="item in items">{{item}} </div>

Here is a practical example:

<div ng-class="{'human':item == 'tom'}" ng-repeat="item in items">{{item}} </div>

Answer 4

Implement ng-class for dynamic styling.

<div ng-class="{'classname':variable}" ng-repeat="item in items">{{item}} </div>

Here is a practical example:

<div ng-class="{'human':item == 'tom'}" ng-repeat="item in items">{{item}} </div>

Answer 5

Answer №3

controller

$scope.fruit = ['apple', 'banana', 'lemon'];
$scope.animal = ['cat', 'dog', 'monkey'];
$scope.human = ['tom', 'john', 'baby'];

$scope.items = $scope.fruit.concat($scope.animal).concat($scope.human);

$scope.checkType = function(type, item) {
    return ($scope[type].indexOf(item) != -1);
}

template

<div ng-class="{fruit: checkType('fruit',item), animal: checkType('animal',item), human: checkType('human',item)}" ng-repeat="item in items">{{item}} </div>

Answer 6

controller

$scope.fruit = ['apple', 'banana', 'lemon'];
$scope.animal = ['cat', 'dog', 'monkey'];
$scope.human = ['tom', 'john', 'baby'];

$scope.items = $scope.fruit.concat($scope.animal).concat($scope.human);

$scope.checkType = function(type, item) {
    return ($scope[type].indexOf(item) != -1);
}

template

<div ng-class="{fruit: checkType('fruit',item), animal: checkType('animal',item), human: checkType('human',item)}" ng-repeat="item in items">{{item}} </div>

Answer 7

Answer №4

One effective strategy is to utilize a diverse data structure. Here's an example:

var items = [
    {name: 'apple', type: 'fruit'},    
    {name: 'banana', type: 'fruit'},
    {name: 'lemon', type: 'fruit'},
    {name: 'cat', type: 'animal'},
    {name: 'dog', type: 'animal'},
    {name: 'monkey', type: 'animal'},
    {name: 'tom', type: 'human'},
    {name: 'john', type: 'human'},
    {name: 'baby', type: 'human'}
];

Although more detailed, this approach offers convenience in return. When adding a new item later on, there's no need to modify the template or update controller code for support. The class name will be assigned automatically.

<div class="{{item.type}}" ng-repeat="item in items">{{item.name}}</div>

Demo: http://plnkr.co/edit/nrlSChOkp0rC7KRPI3FO?p=preview

Answer 8

One effective strategy is to utilize a diverse data structure. Here's an example:

var items = [
    {name: 'apple', type: 'fruit'},    
    {name: 'banana', type: 'fruit'},
    {name: 'lemon', type: 'fruit'},
    {name: 'cat', type: 'animal'},
    {name: 'dog', type: 'animal'},
    {name: 'monkey', type: 'animal'},
    {name: 'tom', type: 'human'},
    {name: 'john', type: 'human'},
    {name: 'baby', type: 'human'}
];

Although more detailed, this approach offers convenience in return. When adding a new item later on, there's no need to modify the template or update controller code for support. The class name will be assigned automatically.

<div class="{{item.type}}" ng-repeat="item in items">{{item.name}}</div>

Adjust the class based on the model's value in AngularJS

Answer №1

Utilizing `ng-class` is a recommended approach.

Answer №2

Answer №3

Answer №4

Demo: http://plnkr.co/edit/nrlSChOkp0rC7KRPI3FO?p=preview

Similar questions

What is the reason behind jshint issuing an alert specifically for the lastSelectedRow being

What steps should I follow to effectively store this JSONB data in PostgreSQL by utilizing node-postgres (pg)?

Starting service upon startup in Angularjs

Changes to the parent state will not be reflected in the child props

WordPress now features the ability to toggle both parent menu items when clicked, providing a more streamlined user experience

Is verifying email and password with jquery possible?

Having trouble retrieving data from the server for the POST request

What is the best way to execute a function every 10 seconds?

Why is useEffect being executed twice?

typescript defining callback parameter type based on callback arguments

A guide on activating dropdown buttons individually using AngularJS (Cascading dropdowns)

Validation customized through offspring control

Refresh the table dynamically in Django without the need to reload the entire page

Re-activate external script following a language update in Next.js

Adding custom styles to Material-UI components

What could be causing "Unknown property" errors when using unicode property escapes?

Start running additional JavaScript code only after the previous one has been fully executed

Retrieving fresh CSS data from earlier animated elements within a Greensock timeline

Changing the Title of UI Tabs

chosen selection from AngularJS dropdown

Adjust the class based on the model's value in AngularJS

Answer №1

Utilizing ng-class is a recommended approach.

Answer №2

Answer №3

Answer №4

Demo: http://plnkr.co/edit/nrlSChOkp0rC7KRPI3FO?p=preview

Similar questions

What is the reason behind jshint issuing an alert specifically for the lastSelectedRow being

What steps should I follow to effectively store this JSONB data in PostgreSQL by utilizing node-postgres (pg)?

Starting service upon startup in Angularjs

Changes to the parent state will not be reflected in the child props

WordPress now features the ability to toggle both parent menu items when clicked, providing a more streamlined user experience

Is verifying email and password with jquery possible?

Having trouble retrieving data from the server for the POST request

What is the best way to execute a function every 10 seconds?

Why is useEffect being executed twice?

typescript defining callback parameter type based on callback arguments

A guide on activating dropdown buttons individually using AngularJS (Cascading dropdowns)

Validation customized through offspring control

Refresh the table dynamically in Django without the need to reload the entire page

Re-activate external script following a language update in Next.js

Adding custom styles to Material-UI components

What could be causing "Unknown property" errors when using unicode property escapes?

Start running additional JavaScript code only after the previous one has been fully executed

Retrieving fresh CSS data from earlier animated elements within a Greensock timeline

Changing the Title of UI Tabs

chosen selection from AngularJS dropdown

Utilizing `ng-class` is a recommended approach.