Question

如果可以从background-color 更新颜色值，我想在ng-style有条件时应用$scope。

以下是范围内的变量：

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

实际上我没有使用任何条件来应用背景颜色，它完成了：

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

此处的想法是仅在someone.id == mainId 时应用此背景颜色。我尝试了几种解决方案，但它似乎不是正确的合成器：

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

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

JSFiddle for testing

有人知道如何实现这个目标吗？

Answer 1

这似乎工作正常。

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

查看两个人的更新小提琴 - mainId具有背景颜色，而另一个不具有：http://jsfiddle.net/fgc21e86/7/

Answer 2

您可以尝试这样

<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 3

你可以这样做

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

这是一个更新的小提琴http://jsfiddle.net/fgc21e86/9/

如何有条件地应用ng风格的动态值？

JSFiddle for testing

3 个答案: