在我当前的项目中,我有一个表,通过scroll事件添加数据.当用户向下滚动时,我在表的末尾添加了20行,总行数可以达到2k-10k.我开始显示20条记录,当用户向下滚动时,我会继续添加20行,直到达到总行数.

正如在我的Angular小提琴示例中,当使用重复时,如果将新数据推送到数组”Angular’执行所有记录并再次渲染它们但是敲除只是执行并呈现新添加的记录.在我的项目中因为我显示数千这种方式的数据在单个表格中是有效的,或者我认为它的工作方式会影响我的表现.

我只用了几个星期才使用角度我不知道如果我做错了什么或者我需要修改一些东西.

Knockoutjs Example：

<h2>Your seat reservations</h2>

<table>
    <thead><tr>
        <th>Passenger name</th><th>Meal</th><th>Test</th>
    </tr></thead>
    <tbody data-bind="foreach: seats()">
        <tr>
           <td data-bind="text: mealName"></td>
           <td data-bind="text: price"></td>
           <td data-bind="text: $root.cellAdded()"></td>
        </tr>    
    </tbody>
</table>
<button data-bind="click: $root.PushData()">I am Here</button>

JS：

// Overall viewmodel for this screen,along with initial state
function Reservationsviewmodel() {
   var self = this;

   self.cellAdded = function(){
        console.log('Test Added');
        return 'ok';
    };

    self.PushData = function(){
        console.log('PushData Called');
        self.seats.push({ mealName: "Standard (sandwich)",price: 0 });
    };


    // Editable data
    self.seats = ko.observableArray([
       { mealName: "Standard (sandwich)",price: 0 },{ mealName: "Premium (lobster)",price: 34.95 },{ mealName: "Ultimate (whole zebra)",price: 290 }
    ]);
}

ko.applyBindings(new Reservationsviewmodel());

AngularJS Example：

<div ng-app>

<div ng-controller="TodoCtrl">
<h2>Your seat reservations</h2>

<table>
    <thead><tr>
        <th>Passenger name</th><th>Meal</th><th>Test</th>
    </tr></thead>
    <tbody >
        <tr ng-repeat="seat in seats">
           <td>{{seat.mealName}}</td>
           <td>{{seat.price}}</td>
           <td>{{callMe()}}</td>
        </tr>    
    </tbody>
</table>
<button ng-click="addRow()">Add Row</button>

</div>
    </div>

JS：

function TodoCtrl($scope) {

    $scope.callMe = function(){
        console.log('Test Added');
        return 'Yes';
    };
    // initialize controller's model    
   $scope.seats = [
       { mealName: "Standard (sandwich)",price: 290 }
    ];

    // Define member functions
    $scope.addRow = function() {
        console.log('PushData Called');
        $scope.seats.push( { mealName: "Standard (sandwich)",price: 0 });

    };

}