Javascript 当使用angularJS从服务器动态创建每个元素时，如何将表中的每个新元素添加到表的顶部？_Javascript_Html_Angularjs

Javascript 当使用angularJS从服务器动态创建每个元素时，如何将表中的每个新元素添加到表的顶部？

javascript html angularjs

Javascript 当使用angularJS从服务器动态创建每个元素时，如何将表中的每个新元素添加到表的顶部？,javascript,html,angularjs,Javascript,Html,Angularjs,在下面的代码中，我创建了一个表，该表使用AngularJS从服务器获取信息，并使用“ng repeat”将每个项添加到表中 <table class=" table table-striped" id="eventTable"> <thead> <tr> <th>Index</th> <th>Time</th> <

在下面的代码中，我创建了一个表，该表使用AngularJS从服务器获取信息，并使用“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>

由于您的数组似乎没有排序，您只需使用

array.splice

将新项目插入$scope.eventlists数组即可：


{{test}}
{{item}}
添加
var-app=angular.module（'myapp'，[]）；
应用控制器（'mycon'，功能（$scope）{
$scope.list=[]；
$scope.addItemAtTopOfList=函数（）{
$scope.list.splice（0,0，$scope.newItem）；
$scope.newItem=“”；
}
});

如果这不能充分回答您的问题，请告诉我。

此处未显示该数组，但该数组按另一个服务javascript文件排序。它从服务器获取的信息在传入时已被排序。当您最初访问该网页时，所有内容都被完美地排序，问题是，每当服务器发生更改时，我都会向该网页发送新事件，现在它会将这些事件添加到底部，新信息应该添加到顶部以保持有序。这有意义吗@threedYeah，这是有道理的，但ng repeat即使在添加新项目时也应保持排序顺序。你在分类什么？您确定您的新项目具有适当的排序值吗？来自服务器的每个项目都基于ID号。我获取信息的方式是通过一个URI，基本上说，“给我这些带有这些过滤器的事件”，我可以指定它们是按逆序还是顺序返回，然后将它们存储在我的数组中。ng repeat确实会在每个数据块中保持有序，但任何传入的新数据都会被排序，然后追加到末尾@你能提供一些你正在尝试添加的数组的json示例吗？这个数组已经在中继器中了？我能够解决这个问题，在添加到我的数组时这是一个非常愚蠢的错误，一旦我确定你的答案起作用了。谢谢

$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 to get 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 to get events: ' + error.message;
                console.log($scope.status);
            });
        }, 1000);

<!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>