使用ngCsv和AngularJS将moment(）对象解析为文件名

Parsing moment() object as filename with ngCsv and AngularJS

本文关键字：对象 文件名 ngCsv AngularJS moment 使用      更新时间：2023-09-26

我正在尝试正确格式化一个要作为文件名插入ngCsv的对象。

ngCsv使用filename="name.csv"属性，但我需要使用一个具有两个属性的对象作为文件名。该对象来自ng-model="dates"，具有两个momentJS属性，如下所示：

｛-开始日期---2014-11-05T21-00-00.000Z-，-结束日期---2014-11-105T21-00:00.000Z-｝

我尝试使用{{dates}}作为文件名，如下所示：

<button ng-csv="filteredRecords" 
        filename="{{dates}}.csv">Download results as CSV
</button>

但是结果文件显然被称为{-startDate---2014-11-05T21-00-00.000Z-,-endDate---2014-11-05T21-00-00.000Z-}.csv，因为日期没有格式。

期望的结果将类似于23-12-2014 - 25-12-2014.csv。

我以前也尝试过在属性中格式化它们，如下所示：

<button ng-csv="filteredRecords" 
        filename="{{ moment(dates.startDate, 'DD[/]MM[/]YYYY') - moment(dates.endDate, 'DD[/]MM[/]YYYY')}}.csv"">
            Download results as CSV
</button>

但这也不起作用。你知道如何做到这一点吗？

编辑

达文的解决方案非常有效。

我试图通过在文件名中包含过滤器中的其他字段来进一步提高它的工作效率。

<div class="form-group col-md-1">
   <input class="form-control" placeholder="Car" ng-model="search.car">
</div>
<div class="form-group col-md-2">
   <input class="form-control" placeholder="Driver" ng-model="search.driver">
</div>
<button class="btn btn-success" 
        type="button" 
        ng-csv="filteredRecords" 
        filename="{{ createCsvFilename(dates, search) }}">
           Download
</button>

以及JS:

$scope.createCsvFilename = function(dates, search) {
    var startMoment = moment(dates.startDate);
    var endMoment = moment(dates.endDate);
    var filterCar = search.car;
    var filterDriver = search.driver;
    return startMoment.format('DD-MM-YYYY') + ' - ' + 
           endMoment.format('DD-MM-YYYY') + 
           ' - Car_' + filterCar  + ' - Driver_' + filterDriver + '.csv';
}

它也能工作，我得到了所需的文件名，但我在控制台中得到了一些错误，因为在应用任何过滤器（日期范围或其他）之前，startDate、endDate和search都是未定义的。

有什么解决办法吗？只是让它尽可能整洁，因为正如我已经说过的，它提供了预期的结果。

我不认为可以在插值{{ }}中使用moment。Angular只在内部运行一个非常精简的JavaScript版本。

因此，您最好的选择是制作一个方法，返回csv文件名。以下示例。

var app = angular.module('myApp', []);
app.controller('Ctrl', function($scope) {
  $scope.dates = {
    startDate: new Date(),
    endDate: new Date()
  };   
  
  $scope.createCsvFilename = function(dates) {
    var startMoment = moment(dates.startDate);
    var endMoment = moment(dates.endDate);
    
    return startMoment.format('DD-MM-YYYY') + ' - ' + endMoment.format('DD-MM-YYYY') + '.csv';
  }
});
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.3/moment.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div ng-app="myApp">
  <div ng-controller="Ctrl">
    <div>
      {{ createCsvFilename(dates) }}
    </div>
    <button ng-csv="filteredRecords" 
        filename="{{ createCsvFilename(dates) }}">
            Download results as CSV
    </button>
  </div>
</div>

相关文章：