angularjs - ng-repeat duplicating items after page reload -


i have angularjs application, node.js , express backend, i'm not using angular's routings. when refresh page using browser's refresh button, items on page loaded in ng-repeat duplicate.

i'm not sure why occurs, i'm wondering happens controller when page reloaded? old controller destroyed, , new 1 created, or controller added, causing duplications?

here part of html file, relvevant controller code:

(trans.html)

<div class="pure-u-1-2" ng-repeat="trans in transactions | filter:searchtext">         <div class="transaction" ng-style="{'border-style': 'solid', 'border-color': categorycolours[trans.category.name]}">             <h2 id="transname">{{ trans.name }}</h2>             <h4>{{ trans.description }}</h4>             <h4>{{ trans.date }}</h4>             <div class="pure-u-1-1">                 <h3 id="categorylabel" ng-style="{'background-color': categorycolours[trans.category.name], color: 'white' }">{{ trans.category.name }}</p>                     <h2 id="transtype" ng-style="{'background-color': categorycolours[trans.category.name], color: 'white' }">{{trans.type}}: £{{ trans.amount }}</h2>             </div>             <div class="clearfix"></div>         </div>     </div> </div> 

(transcontroller)

function transcontroller($scope, socket) {  var months = ["january", "february", "march", "april", "may", "june", "july", "august", "september", "october", "november", "december"];     $scope.transactions = [];     $scope.currentmonth = months[getmonth()];     $scope.categories = {};     $scope.categorycolours = {};     $scope.types = [{         name: "income"     }, {         name: "spending"     }];     init();      function init() {          console.log("emitting init functs");         monthdatarequest($scope.currentmonth, 'init');         socket.emit('getcategories', {});     };      //sends data request server months data     function monthdatarequest(month, type) {         socket.emit('transdatarequest', {             request: 'transactions',             month: month,             type: type         });     };      function getmonth() {         var d = new date();         return d.getmonth();     };      socket.on('categories', function (data) {         var categories = [];         (var key in data.categories) {             console.log("key: ", key);             categories.push(key);         }         $scope.categories = categories;         $scope.categorycolours = data.categories;         console.log($scope.categories);         $scope.safeapply();     });       socket.on('transresponse', function (data) {         console.log("data response received. month: ", data.month, " type: ", data.type);         if (data.type == 'init') {             console.log("setting initial data");             $scope.transactions = [];             console.log("received data: ", data.data);             $scope.currentmonth = data.month;             $scope.transactions = [];             var tran = data.data;             (var = 0; < tran.length; i++) {                 $scope.transactions.push(tran[i]);                 console.log("loop ", i, "data i: ", tran[i]);             };              $scope.safeapply();             console.log($scope.transactions);             console.log("current month " + $scope.currentmonth);         } else {             console.log("was not initial data");             $scope.transactions = [];             console.log(data);             var tran = data.data;             (var = 0; < tran.length; i++) {                 $scope.transactions.push(tran[i]);                 console.log(tran[i]);             };             $scope.safeapply();             console.log($scope.transactions);             console.log("current month " + $scope.currentmonth);         }     }); 

i appreciate advice on why there duplicate transactions being shown after page refreshed.

that's weird, if reload page controller gets initiated again so:

$scope.transactions = []; 

would null transactions - btw transresponse

$scope.transactions = []; console.log("received data: ", data.data); $scope.currentmonth = data.month; $scope.transactions = []; 

you null twice without other actions, think can omit @ least 1 of those

my guess @ point either socket provides duplicated transactions or store somehow in service (can't tell since didn't provided socket service code)

you can catch me directly on angularjs irc channgel irc.freenode.net #angularjs -> maurycyg


Comments

Popular posts from this blog

c# - How to get the current UAC mode -

javascript - What's causing this slow/delayed audio playback in Safari? -