AngularJS应用程序:如何从视图中获取日期并在控制器中使用它? [英] AngularJS app: how can I fetch date from the view and use it in the controller?

问题描述

我正在使用Giphy.com api开发AngularJS 1.6中的应用程序.

I am working on an app in AngularJS 1.6, using the Giphy.com api.

该视图显示导入日期"等信息.参数 import_datetime 来自API，并且是特定于项目的.

The view displays, among others, an "import date". The parameter import_datetime comes from the API and is item-specific.

我很想将日期转换为更用户友好的格式:

I have tempted to convert the date to a more user friendly format:

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

不幸的是，这不起作用.

Unfortunately this does not work.

我的控制器具有以下代码:

My controller has the flowing code:

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

        });

}]);

我可能应该从视图中获取 import_datetime ，将其转换为JavaScript Date对象并在视图中使用.

I should probably get fetch import_datetime from the view, convert it to a JavaScript Date object and the use it in he view.

问题:

1. 我该怎么办?
2. 或者还有什么更好的选择

推荐答案

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

You can create a custom filter that will parse a date from giphy format to a JavaScript date object and pipe it to the AngularJS built-in date filter:

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>

这篇关于AngularJS应用程序:如何从视图中获取日期并在控制器中使用它?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！