AngularJS - jQuery UI - binding issue when ng-csv used

Question

I am trying to add date picker to my HTML page where I am doing data binding using angular js. I have also a requirement to export the data to CSV file which I am doing using ng-csv directive.

I have tried the question present in stack over flow

AngularJS - jQuery UI - binding issue

Here is my fiddle for the same

https://jsfiddle.net/DivB/4uae2gor/3/

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>

and script

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

If I remove all the stuff related to ng-csv(External resources ng-csv and sanitize, include 'ngcsv' and 'ngSanitize' in app module) for the code works. But together it doesn't works.

Can anyone please help me ? Thanks in advance.

Really not clear what your specific problem is. You mention both datepicker and csv. Code won't stop working without throwing errors...what are they? Why are you including duplicates of all your scripts? — charlietfl
– charlietfl, Commented Mar 5, 2015 at 12:59
Also, why do you include both minified and un-minified js files? You're now having duplicate js files of allmost everything. I suggest you only add the minified versions (all min.js files) and leave the bigger ones out, for faster loading. — Jason van der Zeeuw
– Jason van der Zeeuw, Commented Mar 5, 2015 at 13:32
Thanks for the reply . . i am very new to angularjs and jquery. I don't have access to my code now . I will give more details about my code on minday — DivB
– DivB, Commented Mar 5, 2015 at 16:47
I have added fiddle which is not working..jsfiddle.net/DivB/4uae2gor/3 — DivB
– DivB, Commented Mar 9, 2015 at 5:44

DivB · Accepted Answer · 2015-03-10 07:12:40Z

Below way works for me now

only add CDN's in below order

jquery
jquery ui
angular js
angular-sanitize
ng-csv

I have used bootstarp along with above which is added in the very beginning. Rest are not required

Edit your html as below

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

Add below directive in your script

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

        });
    }
}
})

Collectives™ on Stack Overflow

AngularJS - jQuery UI - binding issue when ng-csv used

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related