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
Post a Comment