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

Question

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

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

{-startDate---2014-11-05T21-00-00.000Z-,-endDate---2014-11-05T21-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>

但这也行不通。关于如何实现这一目标有什么想法吗？

编辑

Davin 的解决方案非常有效。

我尝试通过在文件名中包含过滤器中的其他字段来使其进一步工作。

<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 未定义。

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

Answer 1

我不认为你可以在插值{{ }}中使用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>