Question

我正在尝试将日期选择器添加到我的HTML页面，在那里我使用angular js进行数据绑定。我还要求将数据导出到CSV文件，我正在使用ng-csv指令。

我已经尝试了堆栈中存在的问题

这是我同样的小提琴

HTML

<div ng-app="myApp">
<div ng-app="myApp">
<div ng-controller="MainCtrl">
    <p><b>Date from</b> <input id="date1" value="1/1/1980"  ng-model="fromDate" my-datepicker /></p>
    <p><b>Data do:</b> <input id="date2" value="1/1/1980" ng-model="toDate" my-datepicker /></p>
    Choosen date from: {{fromDate}} to: {{toDate}}
    <br />
     <button type="button" class="btn btn-primary" ng-csv="getArray" csv-header="getHeader()" filename="CO_Status.csv" field-separator=","><span>Export to CSV</span></button> </br>
</div>

和脚本

  var myApp = angular.module('myApp', ['myApp.directives','ngSanitize','ngCsv']);
function MainCtrl($scope) {   
$scope.getHeader = function () {return ["CO Number", "Client Name" ]};  
$scope.getArray = [ {A:"a",B:"b"},{A:"c",B:"d"}     ];                                          
 }
     angular.module('myApp.directives', [])
   .directive('myDatepicker', function() {
    return function(scope, element, attrs) {     
 element.datepicker({
     changeYear : true,
     changeMonth : true,
     appendText : '(yyyy-mm-dd)',
     dateFormat : 'yy-mm-dd', 
            onSelect: function(dateText, inst) {                     
                var mdlAttr = $(this).attr('ng-model');
                scope[attrs.ngModel] = dateText;                    
                scope.$apply();                                                   
            }                
    });
}
  });

如果删除与ng-csv相关的所有内容（外部资源ng-csv和清理，在app模块中包含'ngcsv'和'ngSanitize'），代码就可以了。但它在一起并不起作用。

任何人都可以帮助我吗？提前谢谢。

Answer 1

以下方式对我有用

仅按以下顺序添加CDN

jquery的
jquery ui
angular js
角的sanitize
NG-CSV

我在上面使用了bootstarp以及最初添加的内容。不需要休息

编辑你的html，如下所示

<p><b>Date from</b> <input id="date1" datepicker date="fromDate" /></p>

在脚本中添加以下指令

myApp.directive('datepicker',function(){
  return{
    scope:{
    date: "="
    },
    link : function (scope, element, attrs) {
        scope.$watch('date', function(value){
            $(element).datepicker('setDate',value);
        }),
        $(function(){
            $(element).datepicker({
                       changeYear : true,
            changeMonth : true,
            appendText : '(dd/mm/yyyy)',
                dateFormat: 'dd/mm/yy',
                onSelect:function (date) {
                    scope.date = date;
                    scope.$apply();
                }
            });

        });
    }
}
})

AngularJS - 使用ng-csv时的jQuery UI绑定问题

1 个答案: