adding to existing array on click just empties the array why?

Question

Another angularJS question i have scope binding a click that should add one value on the first click ad another value on the second click but it just keeps returning and empty array and filling the first value again why? :

scope.dbclickalert = function (scope, $watch) { var getCheckInDate = this.cellData.date; var formatcheckindate = new Date(getCheckInDate); var checkingdates = []; var curr_datecell = formatcheckindate.getDate(); var padded_day = (curr_datecell < 10) ? '0' + curr_datecell : curr_datecell; var curr_monthcell = formatcheckindate.getMonth() + 1; var padded_month = (curr_monthcell < 10) ? '0' + curr_monthcell : curr_monthcell; var curr_yearcell = formatcheckindate.getFullYear(); var date_stringcell = + padded_month + "/" + padded_day + "/" + curr_yearcell; var checkindatestrg = "checkindate"; console.log(checkingdates.length); if (checkingdates.length < 2) { alert("element exists in array"); checkingdates.push('checkoutdate'); checkingdates.push(date_stringcell); console.log(checkingdates + checkingdates.length); } else { checkingdates.push('checkindate'); checkingdates.push(date_stringcell); } var setCheckInDate = el.hasClass('checkInDate'); if (checkingdates === true) { alert('You have allready set your check In Date'); } else { el.addClass('checkInDate'); $('#checkoutbar').addClass('datePickerchecout'); } $(".date-cell").each(function removeclasses() { $(this).removeClass('true'); }); return getCheckInDate; };

ok so when i declare this outside of the function i get undefined error:

 scope.checkingdates = []; scope.dbclickalert = function(scope, $watch){ var getCheckInDate = this.cellData.date; var formatcheckindate = new Date(getCheckInDate); var checkingdates = scope.checkingdates; var curr_datecell = formatcheckindate.getDate(); var padded_day = (curr_datecell < 10) ? '0'+curr_datecell : curr_datecell; var curr_monthcell = formatcheckindate.getMonth() + 1; var padded_month = (curr_monthcell < 10) ? '0'+curr_monthcell : curr_monthcell; var curr_yearcell = formatcheckindate.getFullYear(); var date_stringcell = + padded_month + "/" + padded_day + "/" + curr_yearcell; var checkindatestrg = "checkindate"; console.log(checkingdates.length); if (checkingdates.length < 2){ alert("element exists in array"); checkingdates.push('checkoutdate'); checkingdates.push(date_stringcell); console.log(checkingdates+checkingdates.length); }else{ checkingdates.push('checkindate'); checkingdates.push(date_stringcell); } var setCheckInDate = el.hasClass('checkInDate'); if (checkingdates === true){ alert('You have allready set your check In Date'); } else{ el.addClass('checkInDate'); $('#checkoutbar').addClass('datePickerchecout'); } $(".date-cell").each(function removeclasses() { $(this).removeClass('true'); }); return getCheckInDate; };

ok in the third version of this it the same data "the date" again if the same div has been clicked but not if a second div with the same ng-click="dbclickalert()" is clicked why?

link: function(scope, el, attributes, dateSheetCtrl, $watch) { scope.checkingdatesarry = []; scope.dbclickalert = function(){ var getCheckInDate = this.cellData.date; var formatcheckindate = new Date(getCheckInDate); var checkingdates = scope.checkingdates; var curr_datecell = formatcheckindate.getDate(); var padded_day = (curr_datecell < 10) ? '0'+curr_datecell : curr_datecell; var curr_monthcell = formatcheckindate.getMonth() + 1; var padded_month = (curr_monthcell < 10) ? '0'+curr_monthcell : curr_monthcell; var curr_yearcell = formatcheckindate.getFullYear(); var date_stringcell = + padded_month + "/" + padded_day + "/" + curr_yearcell; var checkindatestrg = "checkindate"; var checkoutdatestrg = "checkoutdate"; if( $.inArray('checkindate', scope.checkingdates) !== -1 ) { scope.checkingdatesarry.push(checkoutdatestrg); scope.checkingdatesarry.push(date_stringcell); console.log(scope.checkingdatesarry + scope.checkingdatesarry.length); } else{ scope.checkingdatesarry.push(checkindatestrg); scope.checkingdatesarry.push(date_stringcell); console.log(scope.checkingdatesarry + scope.checkingdatesarry.length); } var setCheckInDate = el.hasClass('checkInDate'); if (scope.checkingdates === true){ alert('You have allready set your check In Date'); } else{ el.addClass('checkInDate'); $('#checkoutbar').addClass('datePickerchecout'); } $(".date-cell").each(function removeclasses() { $(this).removeClass('true'); }); return scope.checkingdatesarry; };

ok for anyone that cares the answer was that because my div's where being created with a angularJS directive it was returning and array per div instead of one global array I have taken the array all the way out of the directive and moved it into a service and it works fine.

zs2020 · Accepted Answer · 2013-08-08 18:13:31Z

Because you redefined the array with empty list in the dbclickalert action. So every time when the action is triggered, the array will be empty.

var checkingdates = [];

You should move it outside the function and declare as

$scope.checkingdates = []; //In your code, you may use scope.checkingdates = []; if you renamed the $scope when you inject it

@vimes1984 use scope.checkingdates. you should maintain variables by adding it to the $scope. — zs2020, CommentedAug 8, 2013 at 18:12
@vimes1984 when you access the array you should use scope.checkingdates.push('checkoutdate'); — zs2020, CommentedAug 8, 2013 at 18:37
@vimes1984 did you replace all checkingdates with scope.checkingdates? — zs2020, CommentedAug 8, 2013 at 20:12
yes i did even moving it out of the dbclickalrt it still always refreshes as empty on the next click though — vimes1984, CommentedAug 8, 2013 at 20:42

Collectives™ on Stack Overflow

adding to existing array on click just empties the array why?

1 Answer 1

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Related