如何在Angularjs中动态更改背景颜色

我有一个轮询器，我有设置，有2个文件正在被查询。当发现新数据时，我正试图在视图中设置文本背景的颜色，但这并没有发生

如果有人能解决这个问题，那就太好了。我也欢迎大家提出改进代码结构的建议

服务：

function Poller($http, $timeout) {

var projectcache = { response: [], calls: 0 };
var msgcache = { response: [], calls: 0 };
var newdata = false;
var msgdata = false;
var msgcolor = {};
var projectcolor = {};

var poller = function () {
  $timeout(poller, 10000);
  console.log("Begin Poller!");
   $http.get('http://localhost/app/controllers/php/getProjects.php')
   .then(function(r) {
     if (r.data.projects.length > projectcache.response.length) {
      newdata = true;
      projectcolor = 'green';
     } else {
      newdata = false;
      projectcolor = 'green';
     };
     angular.copy(r.data.projects, projectcache.response);
     console.log("New Data Found: " + newdata);
   });
   $http.get('http://localhost/app/controllers/php/getMessages.php')
   .then(function(m) {
     if (m.data.messages.length > msgcache.response.length) {
      msgdata = true;
      msgcolor = 'green';
     } else {
      msgdata = false;
      msgcolor = 'green';
     };
     angular.copy(m.data.messages, msgcache.response);
     console.log("New Msg Found: " + msgdata);
   });
};

poller();

return {
  projects: projectcache.response,
  messages: msgcache.response,
  newdata: newdata,
  msgdata: msgdata,
  msgcolor: msgcolor,
  projectcolor: projectcolor
};
};

视图：

---

我的第一个想法是使用ng类来实现这一点。我看到您已经有了ng类来处理“活动”类的显示

如果您想尝试这种方法，我会： 1.为要更改的每个状态/颜色创建css类别。（可以在外部css文件中或在页面开头创建的标记之间执行此操作

.successBackground {
background-color:green;
}

.errorBackground {
background-color:red;
}

修改你的ng类属性。这里我假设成功意味着msgdata=true，错误意味着msgdata=false

当前html：

<li ng-class="{active: selectTab=='inbox'}" style="background-color:{{msgcolor}};" ng-click="selectTab='inbox'">Inbox</li>
<li ng-class="{active: selectTab=='projects'}" style="background-color:{{projectcolor}};" ng-click="selectTab='projects'">Projects</li>

>inbox
projects

更新的html：

<li ng-class="{active: selectTab=='inbox', successBackground:msgdata===true, errorBackground:msgdata===false}" ng-click="selectTab='inbox'">Inbox</li>
<li ng-class="{active: selectTab=='projects',successBackground:msgdata===true, errorBackground:msgdata===false}" ng-click="selectTab='projects'">Projects</li>

inbox
projects

现在，当更新msgdata时，successBackground和errorBackground将根据最新的msgdata值自动更新

---

希望这有帮助！

@elevat，注释选项不允许我格式化代码片段，因此我在这篇回复文章中回复您的最新注释

我不确定观察者是否可以只侦听Poller对象，或者是否需要单独侦听每个属性（msgColor、projectColor）。在我的代码片段中，我假设我们不能，并且需要单独侦听每个属性

当前代码：

$scope.msgcolor = Poller.msgcolor;
$scope.projectcolor = Poller.projectcolor;

更新了观察者：

$scope.$watch('Poller.msgcolor', function(newValue,oldValue) {
      $scope.msgcolor = Poller.msgcolor;
});
$scope.$watch('Poller.projectcolor', function(newValue,oldValue) {
      $scope.projectcolor = Poller.projectcolor;
);

尽管如此，如果您仍然希望查看移动$timeout的选项，我将进行以下更改（不确定这是否与您尝试的匹配）

在轮询器服务定义中，删除$timeout。更新的代码段：

function Poller($http) 函数轮询器（$http）

仍在轮询器中，请删除此行：

$timeout(poller, 10000); $timeout（轮询器，10000）

在控制器中添加$timeout-更新的代码段：

app.controller("taskbarController", ['$scope', 'authData', '$location', 'projectsModal', 'sendMessageModal', 'Poller','$timeout' function ($scope, authData, $location, projectsModal, sendMessageModal, Poller,$timeout) app.controller（“taskbarController”、[“$scope”、“authData”、“$location”、“ProjectsModel”、“sendMessageModal”、“Poller”、“$timeout” 函数（$scope，authData，$location，projectsModal，sendMessageModal，Poller，$timeout）

然后在控制器中添加：

$timeout（函数（轮询器）{ Poller.Poller（）； $scope.msgcolor=Poller.msgcolor； $scope.projectcolor=Poller.projectcolor； }, 10000);

---

我希望这会有所帮助，因为我还没有机会测试代码，所以您可能需要对其进行一些修改。让我知道它是如何运行的！

改用，

ng style=“{'background-color'：msgcolor}”

@wZVanG也不起作用：/i我必须更改当前的代码结构才能使其起作用吗？谢谢，伙计，我会尽可能早地尝试一下：）希望它能解决这个问题：）唯一的问题是，它似乎是一种广泛的黑客风格的实现方式。有没有其他更好的结构，或者这是一种更好的方法。@Elevat我会走@Cliff使用的相同路线。唯一的其他方式是使用ng风格，因为您不能直接在标准

style

属性上使用表达式。@Cliff除了接下来，红色背景在执行False时不会启动。我不确定我的代码是否设置为动态更新选项卡。它应该正确吗？我的意思是，如果加载时颜色发生变化，则颜色应根据条件在每次更新时发生变化？ $timeout(poller, 10000); app.controller("taskbarController", ['$scope', 'authData', '$location', 'projectsModal', 'sendMessageModal', 'Poller','$timeout' function ($scope, authData, $location, projectsModal, sendMessageModal, Poller,$timeout) $timeout(function(Poller) { Poller.poller(); $scope.msgcolor = Poller.msgcolor; $scope.projectcolor = Poller.projectcolor; }, 10000);