Angular JS - "Error: [$ interpolation: interr] Unable to interpolate:" from working function

Question

I get the following error in one of my functions:

Error: [$interpolate:interr] http://errors.angularjs.org/1.3.0-rc.4/$interpolate/interr?p0=%7B%7B%20crea…&p1=TypeError%3A%20Cannot%20read%20property%20'startDate'%20of%20undefined at Error (native) at file:///C:/Users/Zuh/Desktop/MSF_Juba_2014/Radio%20Room%20App/angular.min.js:6:421 at z.exp (file:///C:/Users/Zuh/Desktop/MSF_Juba_2014/Radio%20Room%20App/angular.min.js:86:481) at file:///C:/Users/Zuh/Desktop/MSF_Juba_2014/Radio%20Room%20App/angular.min.js:56:215 at q (file:///C:/Users/Zuh/Desktop/MSF_Juba_2014/Radio%20Room%20App/angular.min.js:7:404) at C (file:///C:/Users/Zuh/Desktop/MSF_Juba_2014/Radio%20Room%20App/angular.min.js:56:16) at g (file:///C:/Users/Zuh/Desktop/MSF_Juba_2014/Radio%20Room%20App/angular.min.js:50:19) at C (file:///C:/Users/Zuh/Desktop/MSF_Juba_2014/Radio%20Room%20App/angular.min.js:57:303) at g (file:///C:/Users/Zuh/Desktop/MSF_Juba_2014/Radio%20Room%20App/angular.min.js:50:19) at C (file:///C:/Users/Zuh/Desktop/MSF_Juba_2014/Radio%20Room%20App/angular.min.js:57:303) VM8667 angular.min.js:99 Error: [$interpolate:interr] http://errors.angularjs.org/1.3.0-rc.4/$interpolate/interr?p0=%7B%7B%20crea…&p1=TypeError%3A%20Cannot%20read%20property%20'startDate'%20of%20undefined at Error (native) at file:///C:/Users/Zuh/Desktop/MSF_Juba_2014/Radio%20Room%20App/angular.min.js:6:421 at z.exp (file:///C:/Users/Zuh/Desktop/MSF_Juba_2014/Radio%20Room%20App/angular.min.js:86:481) at pre (file:///C:/Users/Zuh/Desktop/MSF_Juba_2014/Radio%20Room%20App/angular.min.js:66:455) at U (file:///C:/Users/Zuh/Desktop/MSF_Juba_2014/Radio%20Room%20App/angular.min.js:68:177) at C (file:///C:/Users/Zuh/Desktop/MSF_Juba_2014/Radio%20Room%20App/angular.min.js:57:169) at g (file:///C:/Users/Zuh/Desktop/MSF_Juba_2014/Radio%20Room%20App/angular.min.js:50:19) at C (file:///C:/Users/Zuh/Desktop/MSF_Juba_2014/Radio%20Room%20App/angular.min.js:57:303) at g (file:///C:/Users/Zuh/Desktop/MSF_Juba_2014/Radio%20Room%20App/angular.min.js:50:19) at C (file:///C:/Users/Zuh/Desktop/MSF_Juba_2014/Radio%20Room%20App/angular.min.js:57:303) VM8667 angular.min.js:99 3TypeError: Cannot read property 'car' of undefined at k.$scope.createCsvFilename (file:///C:/Users/Zuh/Desktop/MSF_Juba_2014/Radio%20Room%20App/js/msfcontroller.js:26:31) at file:///C:/Users/Zuh/Desktop/MSF_Juba_2014/Radio%20Room%20App/angular.min.js:191:296 at Object.<anonymous> (file:///C:/Users/Zuh/Desktop/MSF_Juba_2014/Radio%20Room%20App/angular.min.js:103:395) at k.$digest (file:///C:/Users/Zuh/Desktop/MSF_Juba_2014/Radio%20Room%20App/angular.min.js:118:410) at k.$apply (file:///C:/Users/Zuh/Desktop/MSF_Juba_2014/Radio%20Room%20App/angular.min.js:121:460) at file:///C:/Users/Zuh/Desktop/MSF_Juba_2014/Radio%20Room%20App/angular.min.js:18:101 at Object.e [as invoke] (file:///C:/Users/Zuh/Desktop/MSF_Juba_2014/Radio%20Room%20App/angular.min.js:36:215) at d (file:///C:/Users/Zuh/Desktop/MSF_Juba_2014/Radio%20Room%20App/angular.min.js:18:22) at kc (file:///C:/Users/Zuh/Desktop/MSF_Juba_2014/Radio%20Room%20App/angular.min.js:18:316) at Ad (file:///C:/Users/Zuh/Desktop/MSF_Juba_2014/Radio%20Room%20App/angular.min.js:17:130) 

Strange, because everything works as intended.

Here's the corresponding error code (the filename attribute calls it):

 <button class="btn btn-success" type="button" ng-csv="filteredRecords" filename="{{ createCsvFilename(dates, search) }}"> Download {{filteredRecords.length}} results as CSV </button> 

And the function in question:

 $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'; } 

search.car and search.driver are undefined filter entries until the user populates them.

Any idea on what might cause the error?

Answer 1

Define objects in the area of ​​your controller.

 $scope.search={"car":"","driver":""} $scope.dates={"startDate":"","endDate":""} 

And change your method as below

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

Also, remove params when calling the method

 <button class="btn btn-success" type="button" ng-csv="filteredRecords" filename="{{ createCsvFilename() }}"> Download {{filteredRecords.length}} results as CSV </button>