Question

我已经编写了代码，我尝试将时间转换为十六进制值，然后将该十六进制值传递给background-color。这是控制器的代码，下面是视图的代码。任何帮助都表示赞赏。我想我在这里错过了一些非常小的东西，但我无法弄明白。

＆＃13;

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);
   
})

＆＃13;

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

＆＃13;

Answer 1

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

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

＆＃13;

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);
   
})

＆＃13;

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

＆＃13;

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

1 个答案: