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

Combining two input text strings

Every time I run `npm install`, I consistently encounter the `code ECONNREFUSED` error message for every

Centering the overlay gallery box in MonoBook Skin of MediaWiki using CSS

Encountering ActionController::UnknownFormat error while transferring data from an Angular application in Rails 5

Sharing information between External JavaScript and React JS/Redux

Tips for maintaining an updated array's consistency on page refresh in Vue.js?

CKEditor with Readonly Option and Active Toolbar Controls

Tips for utilizing the data-target feature in Bootstrap?

What causes the navbar-brand to be hidden on Chrome mobile browsers?

The art of connecting Javascript commands in succession

How can I ensure my card div is responsive in Bootstrap?

Integrating jQuery Tooltip with Mouseover Event

The fetch() POST request is met with an error message stating "415 Unsupported Media Type"

Adjust the object's width and position based on the window's width

Unexpected behavior observed when trying to smoothly scroll to internal links within a div, indicating a potential problem related to CSS dimensions and

Having trouble with JavaScript's XMLHttpRequest returning an 'undefined' string on the first run of my script. I need to find a way to ensure that it loads correctly during

Components for managing Create, Read, Update, and Delete operations

Transparent dropdown elements using Bootstrap

Omit the <span> tag when exporting to XLS format

Unpacking objects within an array in the backend of a Next.js application

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

Combining two input text strings

Every time I run `npm install`, I consistently encounter the `code ECONNREFUSED` error message for every

Centering the overlay gallery box in MonoBook Skin of MediaWiki using CSS

Encountering ActionController::UnknownFormat error while transferring data from an Angular application in Rails 5

Sharing information between External JavaScript and React JS/Redux

Tips for maintaining an updated array's consistency on page refresh in Vue.js?

CKEditor with Readonly Option and Active Toolbar Controls

Tips for utilizing the data-target feature in Bootstrap?

What causes the navbar-brand to be hidden on Chrome mobile browsers?

The art of connecting Javascript commands in succession

How can I ensure my card div is responsive in Bootstrap?

Integrating jQuery Tooltip with Mouseover Event

The fetch() POST request is met with an error message stating "415 Unsupported Media Type"

Adjust the object's width and position based on the window's width

Unexpected behavior observed when trying to smoothly scroll to internal links within a div, indicating a potential problem related to CSS dimensions and

Having trouble with JavaScript's XMLHttpRequest returning an 'undefined' string on the first run of my script. I need to find a way to ensure that it loads correctly during

Components for managing Create, Read, Update, and Delete operations

Transparent dropdown elements using Bootstrap

Omit the <span> tag when exporting to XLS format

Unpacking objects within an array in the backend of a Next.js application

Utilizing `ng-class` is a recommended approach.