javascript - How do I add each new element in table to top of table when each element is dynamically created from server using angularJS? -
in next code, creating table uses angularjs grab info server , adds each item table using 'ng-repeat'.
<table class=" table table-striped" id="eventtable"> <thead> <tr> <th>index</th> <th>time</th> <th>description</th> <th>source</th> </tr> </thead> <tbody> <tr data-ng-repeat="event in eventslist"> <tr> <td>{{event.idx}}</td> <td class="text-left" nowrap> {{event.srvtime | date :'yyyy-mm-dd hh:mm:ss'}} </td> <td class="text-left"> <a data-ui-sref="events.details({edidx: event.idx})">{{event.desc}}</a> </td> <td class="text-left" nowrap> {{event.s0.id}} </td> </tr> </tbody> </table> i have polling set on web page javascript controller(see below) stays near 'real-time'. need each new item coming in added top of table, how do this, should in controller or can straight html file? thanks!
$scope.latesteventindex = 0; var poll; eventsfactory.getevents() .success(function (result) { angular.foreach(result.v, function (d) { $scope.eventslist.push(d); if (d.idx > $scope.latesteventindex) { $scope.latesteventindex = d.idx; } }); $rootscope.eventslist = $scope.eventslist; }) .error(function (error) { $scope.status = 'unable events: ' +error.message; console.log($scope.status); }); poll = $interval(function() { eventsfactory.getlatestevents($scope.latesteventindex) .success(function (result) { angular.foreach(result.v, function (d) { $scope.eventslist.push(d); if (d.idx > $scope.latesteventindex) { $scope.latesteventindex = d.idx; } }); $rootscope.eventslist = $scope.eventslist; }) .error(function (error) { $scope.status = 'unable events: ' + error.message; console.log($scope.status); }); }, 1000);
since array not appear sorted, can insert new items $scope.eventlists array using array.splice. here's plunker:
<!doctype html> <html ng-app="myapp"> <head> <script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script> </head> <body ng-controller="mycon"> <h1>{{test}}</h1> <div> <div ng-repeat="item in list">{{item}}</div> </div> <input ng-model="newitem" /> <button ng-click="additemattopoflist()">add</button> <script> var app = angular.module('myapp', []); app.controller('mycon', function($scope){ $scope.list = []; $scope.additemattopoflist = function(){ $scope.list.splice(0, 0, $scope.newitem); $scope.newitem = ""; } }); </script> </body> </html> let me know if doesn't answers question sufficiently.
javascript html angularjs
No comments:
Post a Comment