代码之家  ›  专栏  ›  技术社区  ›  Razvan Zamfir

AngularJS应用程序:如何从视图中获取日期并在控制器中使用它?

  •  0
  • Razvan Zamfir  · 技术社区  · 6 年前

    除其他外,该视图显示“导入日期”。参数 import_datetime 来自API 特定项目 .

    <p class="m-0 meta">{{giphy.import_datetime | date : "dd.MM.y" }}</p>
    

    我的控制器有流动代码:

    app.controller("giphyCtrl", ["$scope", "$http", "$filter", "$timeout", function($scope, $http, $filter, $timeout) {
        var url = "https://api.giphy.com/v1/gifs/trending?api_key=PTZrBlrq8h2KUsRMeBuExZ5nHyn7dzS0&limit=240&rating=G";
        $scope.giphyList = [];
        $scope.search = "";
        $scope.filterList = function() {
            var oldList = $scope.giphyList || [];
            $scope.giphyList = $filter('filter')($scope.giphys, $scope.search);
            if (oldList.length != 0) {
                $scope.pageNum = 1;
                $scope.startAt = 0;
            };
            $scope.itemsCount = $scope.giphyList.length;
            $scope.pageMax = Math.ceil($scope.itemsCount / $scope.perPage);
        };
    
        $http.get(url)
            .then(function(data) {
                // giphy arary
                $scope.giphys = data.data.data;
                $scope.filterList();
                console.log($scope.giphys);
    
                // Paginate
                $scope.pageNum = 1;
                $scope.perPage = 24;
                $scope.startAt = 0;
                $scope.filterList();
    
                $scope.currentPage = function(index) {
                    $("html, body").animate({
                        scrollTop: 0
                    }, 500);
                    $timeout(function() {
                        $scope.pageNum = index + 1;
                        $scope.startAt = index * $scope.perPage;
                    }, 0);
                };
    
                $scope.prevPage = function() {
                    if ($scope.pageNum > 1) {
                        $scope.pageNum = $scope.pageNum - 1;
                        $scope.startAt = ($scope.pageNum - 1) * $scope.perPage;
                    }
                };
    
                $scope.nextPage = function() {
                    if ($scope.pageNum < $scope.pageMax) {
                        $scope.pageNum = $scope.pageNum + 1;
                        $scope.startAt = ($scope.pageNum - 1) * $scope.perPage;
                    }
                };
    
                $scope.selectedIndex = null;
                $scope.selectedGiphy = null;
    
                $scope.fetchSinglegGiphy = function(giphy, index) {
                    $scope.selectedIndex = index;
                    $scope.selectedGiphy = giphy;
                }
    
            });
    
    }]);
    

    我应该去拿 从视图中,将其转换为JavaScript日期对象,并在视图中使用它。

    问题:

    1. 我该怎么做?
    0 回复  |  直到 6 年前
        1
  •  2
  •   antonku    6 年前

    您可以创建一个自定义过滤器,将日期从giphy格式解析为JavaScript日期对象,并通过管道将其传输到AngularJS内置 date 过滤器:

    var app = angular.module('app', []);
    
    app.filter('dateParse', function() {
      return function(date) {
        return Date.parse(date);
      };
    })
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
    <div ng-app="app">
      <p>{{'2019-07-10 14:12:59' | dateParse | date : "dd.MM.y"}}</p>
    </div>