Tips for implementing a dynamic value in the ng-style based on certain conditions

Question

Tips for implementing a dynamic value in the ng-style based on certain conditions

Is there a way to set a background-color conditionally using ng-style when the color value can be updated from $scope?

These are the variables in my scope:

$scope.someone = { id: '1', name: 'John', color: '#42a1cd' };
$scope.mainId = 1;

Currently, I am setting the background color without any conditions like this:

<div ng-style="{'background-color': someone.color}">
    {{someone.name}}
</div>

I want to apply this background color only when someone.id == mainId. I have tried multiple solutions but none of them seem to be correct:

ng-style="{{someone.id == mainId}} ? ('background-color': {{someone.color}}) : null"

ng-style="{ ('background-color': someone.color) : someone.id == mainId }"

Check out JSFiddle demo for testing

If anyone has an idea on how to achieve this, please let me know!

javascript css angularjs

Answer 1

Answer №1

It appears to be functioning correctly.

ng-style="{'background-color': user.identifier === primaryId ? user.selectedColor : ''}"

Check out the revised demo with two users - the one with primaryId is highlighted with a background color, while the other one remains unaffected: http://jsfiddle.net/abc123de/9/

Answer 2

It appears to be functioning correctly.

ng-style="{'background-color': user.identifier === primaryId ? user.selectedColor : ''}"

Check out the revised demo with two users - the one with primaryId is highlighted with a background color, while the other one remains unaffected: http://jsfiddle.net/abc123de/9/

Answer 3

Answer №2

Here is a possible solution:

<div ng-app="myApp" ng-controller="MyCtrl">
  <div ng-style="{'background-color': getColor(someone)}">
    {{someone.name}}
  </div>
</div>

var myApp = angular.module('myApp', []);
myApp.controller('MyCtrl', ['$scope', function($scope) {
  $scope.someone = {
    id: 1,
    name: 'John',
    color: '#42a1cd'
  };
  $scope.getColor = function(someone) {

        if($scope.mainId === someone.id) {
        return someone.color;
      }
  }
  $scope.mainId = 1;
}]);

Answer 4

Here is a possible solution:

<div ng-app="myApp" ng-controller="MyCtrl">
  <div ng-style="{'background-color': getColor(someone)}">
    {{someone.name}}
  </div>
</div>

var myApp = angular.module('myApp', []);
myApp.controller('MyCtrl', ['$scope', function($scope) {
  $scope.someone = {
    id: 1,
    name: 'John',
    color: '#42a1cd'
  };
  $scope.getColor = function(someone) {

        if($scope.mainId === someone.id) {
        return someone.color;
      }
  }
  $scope.mainId = 1;
}]);

Answer 5

Answer №3

If you want to achieve this effect, you can use the following code snippet:

ng-style="someone.id == mainId ? {'background-color':'{{someone.color}}'} : {'background-color':'red'}"

To see a live example, check out the updated fiddle at http://jsfiddle.net/fgc21e86/9/

Answer 6

If you want to achieve this effect, you can use the following code snippet:

ng-style="someone.id == mainId ? {'background-color':'{{someone.color}}'} : {'background-color':'red'}"

To see a live example, check out the updated fiddle at http://jsfiddle.net/fgc21e86/9/

Tips for implementing a dynamic value in the ng-style based on certain conditions

Check out JSFiddle demo for testing

Answer №1

Answer №2

Answer №3

Similar questions

`Can you guide me on the proper path for designing this website layout?`

Having trouble loading a React component

Divide the inner HTML content to extract text for translation purposes using JavaScript

Utilizing jQuery to Extract Values from a List of Options Separated by Commas

Click here to navigate to the same or a different page using an anchor

React: maintaining referential equality across renders by creating closures with useCallback

What is the process for including parameters in a javascript/jquery function?

Customizing the choices for an ActionSheet on Ionic 2 on the fly

Display a message if the local storage is empty

Error: 'require' is undefined in react.production.min.js during production deployment

Confirm the input validity using jQuery for radio buttons, checkboxes, and dropdown menus

It appears that my array is not being properly populated by my callback functions

Chromium is having issues with updating the dynamic source attribute

Utilizing variables in Angular service to make API calls

The command `sequelize.sync({force:true}) is running into issues and the log output is coming up empty

Struggling with removing the unattractive left border on my Tumblr page

Having a tough time navigating the Bootstrap upgrade from 2.x to 3.x - now my design is all out of whack

Is there a way to set up gulp without relying on npm when using shared hosting?

What is the best way to replace multiple strings with bold formatting in JavaScript without losing the previous bolded text?

Issue with Checkbox Functionality Between Parent and Child Components in React.js