无法显示连接到我的 Angular 应用程序的 firebase 数据库的时间格式数据

Question

我正在尝试显示来自 firebase 数据库的时间格式数据，我已连接到 angular 应用程序，输入类型为 "text" 的 html 标签显示正常在仪表板上，但时间格式有问题，无法显示。

下面是HTML代码

<div class = "row" ng-controller = "taskCtrl" >
<div class = "col-md-5">

<h3> Add Task </h3>

<form ng-submit= "addtask()">
<div class="form-group">
       <select ng-model="selectedName" ng-options="X as X.Appname for X in appy">
</select>
    </div>
    <div class="form-group">
    <label >Task Name</label>
    <input type="text" class="form-control" ng-model = "tname" placeholder="Task Name">
  </div>
    <div class="form-group">
    <label >Task Description</label>
    <input type="text" class="form-control" ng-model = "tdes" placeholder="Task Description">
  </div>
 <div class="form-group">
    <label >Task start time </label>
    <input type= "text" class="form-control" ng-model = "tstime" placeholder="Task start time" >
  </div>

   <div class="form-group">
    <label >Task Info</label>
    <input type="time" class="form-control" ng-model = "tetime" placeholder="Task end time">
  </div>

<div class="form-group">
    <label >Phone number</label>
    <input type="text" class="form-control" ng-model = "phno" placeholder="Phone number">
  </div>  

<button type = "submit" class = "btn btn-default">Submit</button>
</form>
    </div>
<div class = "col-md-7">
    <h3> Contacts</h3>
    <table class= "table table-striped">
    <thead>
        <tr>
        <th>Task Name </th>
            <th>Task Description</th>
            <th>Task Start time </th>
            <th>Task End Time </th>
            <th> Task Status </th>

        </tr>
        <tbody>
        <tr ng-repeat = "tas in task">
            <td> {{tas.tname}}</td>
            <td> {{tas.tdes}}</td>
             <td> {{tas.tstime}}</td>
             <td> {{tas.tetime}}</td>
        </tr>
        </tbody>
        </thead>


    </table>
    </div>
</div>

下面是 javascript 代码：

'use strict';

angular.module('myApp.task', ['ngRoute'])

.config(['$routeProvider', function($routeProvider) {
  $routeProvider.when('/task', {
    templateUrl: 'views/task.html',
    controller: 'taskCtrl'
  });
}])

.controller('taskCtrl', ['$scope','$firebaseArray',function($scope, $firebaseArray) {


var ref = new Firebase('https://contactlist9934.firebaseio.com/task');
$scope.task = $firebaseArray(ref);

var ref3 = new Firebase('https://contactlist9934.firebaseio.com/application');
$scope.appy = $firebaseArray(ref3);

$scope.addtask = function(){

var r1;
var r2;
var r3;
var r4;

r1 = $scope.tstime.toString();
r2  = r1.substring(16,24);
r3 = $scope.tetime.toString();
r4  = r3.substring(16,24);


    $scope.task.$add({

        tname: $scope.tname,
        tdes: $scope.tdes,
        etime: r2,
        ttime: r4,
        appname: $scope.selectedName.Appname

    }).then(function(ref){

        var id = ref.key();
        console.log('Added Task' +id);
        $scope.name = '';
        $scope.email = '';


            });

          }





}])

.controller('myCtrl', function($scope) {



     });

文本字段显示正常，但时间格式未显示，请帮我解决这个！！

Answer 1

您可以为此使用过滤器并将控制器中的 tstime 和 tetime 转换为您想要的格式，如下所示：

$scope.tstime = $filter('date')($scope.tstime, 'yyyy/MM/dd'); 
$scope.tetime = $filter('date')($scope.tetime, 'yyyy/MM/dd');

或者如果你想使用一个指令并在多个输入中使用它，你可以像这样创建一个指令：

.directive('formatDate', ['$timeout', '$filter', function ($timeout, $filter) {
  return {
    require: 'ngModel',
    link: function ($scope, $element, $attrs, $ctrl) {
      var dateFormat = 'yyyy/MM/dd';
      $ctrl.$parsers.push(function (viewValue) {
        var pDate = Date.parse(viewValue);
        if (isNaN(pDate) === false) {
          return new Date(pDate);
        }
        return undefined;
      });
      $ctrl.$formatters.push(function (modelValue) {
        var pDate = Date.parse(modelValue);
        if (isNaN(pDate) === false) {
          return $filter('date')(new Date(pDate), dateFormat);
        }
        return undefined;
      });
      $element.on('blur', function () {
        var pDate = Date.parse($ctrl.$modelValue);
        if (isNaN(pDate) === true) {
          $ctrl.$setViewValue(null);
          $ctrl.$render();
        } else {
          if ($element.val() !== $filter('date')(new Date(pDate), dateFormat)) {
            $ctrl.$setViewValue($filter('date')(new Date(pDate), dateFormat));
            $ctrl.$render();
          }
        }

      });
    }
  };
}]);

然后像这样将其绑定到您的输入：

<input type= "text" class="form-control" format-date ng-model="tstime" placeholder="Task start time">
<input type="time" class="form-control" format-date ng-model="tetime" placeholder="Task end time">

Answer 2

现在已修复，因为我试图从 firebase 获取数据，以下变量应与以下代码匹配：- -

HTML

 <tr ng-repeat = "tas in taski">
            <td> {{tas.tname}}</td>
            <td> {{tas.tdes}} </td>
             <td> {{tas.etime}}</td>
             <td> {{tas.ttime}}</td>
             <td> {{tas.appname}}</td>

        </tr>

脚本

$scope.task.$add({

        tname: $scope.tname,
        tdes: $scope.tdes,
        etime: $scope.tstime,
        ttime: r4,
        appname: $scope.selectedName.Appname

    }).then(function(ref)

无法显示连接到我的 Angular 应用程序的 firebase 数据库的时间格式数据

Not able to display the time format data from the firebase database connected to my Angular app

html

angularjs

firebase

angularfire