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