• angularjs 构建主页 内置过滤器、日期的格式化


    从构建负责管理主屏幕的 MainController 开始。在这个 MainController 控制器内,只需设
    置一个每秒运转一次,同时更新一个局部作用域变量的延时

     1 angular.module('myApp', [])
     2 .controller('MainController', function($scope, $timeout) {
     3 // 构建date对象
     4 $scope.date = {};
     5 // 更新函数
     6 var updateTime = function() {
     7 $scope.date.raw = new Date();
     8 $timeout(updateTime, 1000);
     9 };
    10 // 启动更新函数
    11 updateTime();
    12 });
    angular.module('myApp', [])
    .controller('MainController', function($scope, $timeout) {
    // 构建date对象
    $scope.date = {};
    // 更新函数
    var updateTime = function() {
    $scope.date.raw = new Date();
    $timeout(updateTime, 1000);
    };
    // 启动更新函数
    updateTime();
    });

    MainController 内的 updateTime() 函数每秒都会运行,以便更新 $scope.date.raw 时间戳,
    同时更新视图

    <div class="container">
    <div ng-controller="MainController">
    {{ date.raw }}
    </div>
    </div>

    目前,浏览器中的这个日期还非常丑陋。我们可以利用Angular内置的过滤器以更优雅的方
    式来格式化这个日期。

    <div class="container">
      <div ng-controller="MainController">
        <div id="datetime">
          <h1>{{ date.raw | date:'hh mm ss' }}</h1>
        </div>
      </div>
    </div>
    你可以在视图中添加另一个日期,以人性化的方式来显示当前日期。只要再添加一个格式化
    的日期就可以了:
    <!-- ... -->
    <div id="datetime">
    <h1>{{ date.raw | date: 'hh mm ss' }}</h1>
    <h2>{{ date.raw | date: 'EEEE, MMMM yyyy' }}</h2>
    </div>
    <!-- ... -->
  • 相关阅读:
    Android 查看服务service是否正在运行 列出正在运行的服务
    应用获取root权限分析及总结
    图片高斯模糊效果
    Android的启动脚本–init.rc
    前台页面——js/jq 取/设值
    Access denied for user 'bruce'@'localhost' to database 'DBbruce'
    python基础-面向对象opp
    python基础-软件目录结构规范
    python基础-装饰器
    python基础列表生成式,迭代器
  • 原文地址:https://www.cnblogs.com/sxz2008/p/6557900.html
Copyright © 2020-2023  润新知