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

debugcn 发表于 Dev

大象

我有一个设置有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
};
};

看法：

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

控制器：

app.controller("taskbarController", ['$scope', 'authData', '$location', 'projectsModal', 'sendMessageModal', 'Poller',
function ($scope, authData, $location, projectsModal, sendMessageModal, Poller) {

$scope.msgcolor = Poller.msgcolor;
$scope.projectcolor = Poller.projectcolor;
}]);

悬崖

我的第一个想法是为此使用ng-class。我看到您已经具有ng类来处理“活动”类的显示。

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

.successBackground {
background-color:green;
}

.errorBackground {
background-color:red;
}

修改您的ng-class属性。在这里，我假设成功意味着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>

更新的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>

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

希望这可以帮助！

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。