web-dev-qa-db-fra.com

Comment appliquer conditionnellement une valeur dynamique en style ng?

Je voudrais appliquer un background-color Avec ng-style Conditionnellement lorsque la valeur de la couleur peut être mise à jour à partir de $scope.

Voici mes variables de portée:

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

En fait je n'utilise aucune condition pour appliquer la couleur de fond, cela se fait avec:

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

L'idée ici est d'appliquer cette couleur d'arrière-plan uniquement lorsque someone.id == mainId. J'ai essayé plusieurs solutions, mais cela ne semble pas être le bon synthax:

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

JSFiddle pour les tests

Est-ce que quelqu'un a une idée de comment je peux y arriver?

javascriptcssangularjs
8
Mistalis

Cela semble bien fonctionner.

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

Voir le violon mis à jour avec deux personnes - celui avec mainId a une couleur d'arrière-plan, tandis que l'autre n'a pas: http://jsfiddle.net/fgc21e86/7/

6
Fissio

Vous pouvez essayer comme ça

<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;
}]);
3
Ashish Bakwad

Tu pourrais le faire comme

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

Voici un violon mis à jour http://jsfiddle.net/fgc21e86/9/

3
stwic