gpt4 book ai didi

angularjs - 淘汰赛 foreach vs Angular ng-repeat

转载 作者:行者123 更新时间:2023-12-04 04:38:32 27 4
gpt4 key购买 nike

我用 Knockout 做了什么,我正在尝试用 Angular 做些什么。

在我当前的项目中,我有一个表格,其中数据正在通过滚动事件添加。当用户向下滚动时,我在表的末尾添加 20 行,总行数可以达到 2k-10k。我从显示 20 条记录开始,当用户向下滚动时,我不断添加 20 行,直到达到总行数。

就像在我的 Angular fiddle 示例中一样,如果将新数据推送到数组“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: 0 },
{ mealName: "Premium (lobster)", price: 34.95 },
{ mealName: "Ultimate (whole zebra)", price: 290 }
];

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

};

}

最佳答案

我建议更新到 Angular 1.3+ 并使用其一次性绑定(bind)功能,因为添加后记录不会更改。这可以大大减少 DOM 上的监视,并有助于提高性能。

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

此外,我建议在您的表达式中删除该函数调用,因为每次 Angular 运行摘要循环时都会对其进行评估,这是一个真正的性能杀手。

如果要检查模型是否已更新,请在 Controller 中使用 $watch ( https://docs.angularjs.org/api/ng/type/ $rootScope.Scope)。
$scope.$watch('seats', function() {
console.log('Test Added');
});

另一个与性能无关的提示:在 Controller 中始终使用某种模型对象是一种很好的做法,有助于最大限度地减少范围问题。所以你的 Controller 看起来像这样:
function TodoCtrl($scope) {

// initialize controller's model
$scope.model = {};
$scope.model.seats = [
{ mealName: "Standard (sandwich)", price: 0 },
{ mealName: "Premium (lobster)", price: 34.95 },
{ mealName: "Ultimate (whole zebra)", price: 290 }
];

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

$scope.$watch('model.seats', function() {
console.log('Test Added');
});
}

你的HTML是这样的:
<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 model.seats">
<td>{{::seat.mealName}}</td>
<td>{{::seat.price}}</td>
<!--<td>{{callMe()}}</td>-->
</tr>
</tbody>
</table>
<button ng-click="addRow()">Add Row</button>
</div>
</div>

此外,正如@Gabe 已经提到的,ngInfiniteScroll 可能是您的用例的一个很好的补充: http://binarymuse.github.io/ngInfiniteScroll/

关于angularjs - 淘汰赛 foreach vs Angular ng-repeat,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21051436/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com