使用angularjs根据时间更改背景颜色。

Question

我已经为其编写了代码，其中我尝试将时间转换为十六进制值，然后将该十六进制值传递给background-color。 这是控制器的代码，下面是用于查看的代码。 感谢任何帮助。我想我在这里错过了一些很小的东西，但无法弄清楚。

 var app = angular.module('myApp', []); app.controller('TimeCtrl', function($scope,$timeout, $filter) { $scope.clock = "loading clock"; // initialise the time variable $scope.tickInterval = 1000 //ms var tick = function () { $scope.clock = Date.now() // get the current time $scope.a = $filter('date')($scope.clock,'HHmmss'); $timeout(tick, $scope.tickInterval); // reset the timer } // Start the timer $timeout(tick, $scope.tickInterval); })

 <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <script src="script.js"></script> </head> <body ng-app="myApp"> <div ng-controller='TimeCtrl'> <p ng-style="{'background-color': '#{{a}}'}">{{clock |date : 'HH:mm:ss'}}</p> {{a}} </div> </body> </html>

Answer 1

首先，在这种情况下，您不想使用$timeout ，而您想使用$interval

其次， ng-style已经期望有一个角度表达式，因此不需要{{}} 。 我所做的只是将表达式更改为语法正确的。

 var app = angular.module('myApp', []); app.controller('TimeCtrl', function($scope,$interval, $filter) { $scope.clock = "loading clock"; // initialise the time variable $scope.tickInterval = 1000 //ms var tick = function () { $scope.clock = Date.now() // get the current time $scope.a = $filter('date')($scope.clock,'HHmmss'); } // Start the timer $interval(tick, $scope.tickInterval); })

 <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <script src="script.js"></script> </head> <body ng-app="myApp"> <div ng-controller='TimeCtrl'> <p ng-style="{'background-color': '#' + a }">{{clock |date : 'HH:mm:ss'}}</p> {{a}} </div> </body> </html>

使用angularjs根据时间更改背景颜色。

问题描述

1 个解决方案

解决方案1
1 已采纳 2015-03-28 04:07:28

使用angularjs根据时间更改背景颜色。

问题描述

1 个解决方案

解决方案1 1 已采纳 2015-03-28 04:07:28

解决方案1
1 已采纳 2015-03-28 04:07:28