角度ng-repeat和表單性能
[英]Angular ng-repeat and form performance
問題描述
我正在寫一個非常基本的頁面來跟蹤特定客戶的內部工作和項目。 我想允許用戶編輯頁面上顯示的當前條目。 我寫了這個部分，基本上重復了數據庫中的所有條目。 然后，單擊可顯示編輯表單，該表單將根據重復值自動填充。 效果很好，但現在我擔心性能。 每個條目都有大量額外的代碼，如果理論上我有數百個，那么執行此操作似乎效率很低。
這是我到目前為止的內容：
<div class="task">
<label class="checkbox" ng-repeat="banner in banners | filter : filterBanners">
<input type="checkbox" value="{{banner.ID}}" ng-click="editClicked=!editClicked;"/>
<span >{{banner.JOBNAME}} | {{banner.JOBNUMBER}} | {{banner.FILEPATH}} | <a target="_blank" href="{{banner.LINK}}">Link To Project</a> | {{banner.TAGS}} </span>
<a ng-click="deleteBanners(banner.ID)" class="pull-right"><i class="glyphicon glyphicon-trash"></i></a>
<form ng-init="editClicked=false; " ng-if="editClicked" id="newBannerForm" class="add-banner" enter="editBanners(nameInput,numberInput,linkInput,pathInput,tagsInput)" j-validate>
<div class="form-actions">
<div class="input-group">
<input type="text" class="form-control" name="jobname" ng-model="nameInput" placeholder="{{banner.JOBNAME}}" ng-focus="editClicked"/>
<input type="text" class="form-control" name="jobnumber" ng-model="numberInput" placeholder="{{banner.JOBNUMBER}}" ng-focus="editClicked"/>
<input type="text" class="form-control" name="link" ng-model="linkInput" placeholder="{{banner.LINK}}" ng-focus="editClicked"/>
<input type="text" class="form-control" name="path" ng-model="pathInput" placeholder="{{banner.PATH}}" ng-focus="editClicked"/>
<input type="text" class="form-control" name="tags" ng-model="tagsInput" placeholder="{{banner.TAGS}}" ng-focus="editClicked"/>
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-plus"></i> Submit</button>
</div>
</div>
</div>
</form>
</label>
</div>
有誰知道一種更高效的方法來做到這一點？ 我當時在考慮建立一個指令，並使用
scope.$apply(attrs.enter);
執行將值傳遞給的功能。 但不能完全確定這是否比我擁有的更好。
1 個解決方案
解決方案1
2 已采納 2014-09-25 23:20:43
10,000似乎有點慢，但在1,000卻仍然相當快。 看到這個plnkr 。
<!DOCTYPE html>
<html ng-app="app">
<head>
<link data-require="bootstrap@*" data-semver="3.2.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" />
<script data-require="bootstrap@*" data-semver="3.2.0" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.js"></script>
<script data-require="angular.js@1.2.25" data-semver="1.2.25" src="https://code.angularjs.org/1.2.25/angular.js"></script>
<style>
.task{
border:solid 1px #aaa;
padding:2em;
}
</style>
</head>
<body ng-controller="main">
<input class='form-control' placeholder='Search' ng-model="search.text" />
<div class="task" ng-repeat="banner in banners | filter : search.text">
<label class="checkbox">
<input type="checkbox" value="{{banner.ID}}" ng-click="editClicked=!editClicked;" />
<span>{{banner.JOBNAME}} | {{banner.JOBNUMBER}} | {{banner.FILEPATH}} | <a target="_blank" href="{{banner.LINK}}">Link To Project</a>
| {{banner.TAGS}} </span>
<a ng-click="deleteBanners(banner.ID)" class="pull-right">
<i class="glyphicon glyphicon-trash"></i>
</a>
<form ng-init="editClicked=false; " ng-if="editClicked" id="newBannerForm" class="add-banner" enter="editBanners(nameInput,numberInput,linkInput,pathInput,tagsInput)" j-validate="">
<div class="form-actions">
<div class="input-group">
<input type="text" class="form-control" name="jobname" ng-model="nameInput" value="{{banner.JOBNAME}}" placeholder="{{banner.JOBNAME}}" ng-focus="editClicked" />
<input type="text" class="form-control" name="jobnumber" ng-model="numberInput" placeholder="Job Number" ng-focus="editClicked" />
<input type="text" class="form-control" name="link" ng-model="linkInput" placeholder="Link" ng-focus="editClicked" />
<input type="text" class="form-control" name="path" ng-model="pathInput" placeholder="Path" ng-focus="editClicked" />
<input type="text" class="form-control" name="tags" ng-model="tagsInput" placeholder="Tags" ng-focus="editClicked" />
<div class="input-group-btn">
<button class="btn btn-default" type="submit">
<i class="glyphicon glyphicon-plus"></i>
Submit</button>
</div>
</div>
</div>
</form>
</label>
</div>
<script>
var app = angular.module('app', []);
app.controller('main', function($scope){
$scope.banners = [];
var obj = {
ID: null,
JOBNUMBER: '1234',
JOBNAME: 'doit',
FILEPATH: '/path/to/file.ext',
LINK: 'http://www.google.com/',
TAGS: ['one', 'two', 'three']
};
for(var i=0; i < 10000; i++){
var o = angular.copy(obj);
o.ID = i;
o.JOBNUMBER = i;
$scope.banners.push(o);
}
});
</script>
</body>
</html>
我建議您實現分頁或延遲加載（例如一次100-500）。 這應該使客戶端體驗保持敏捷。
ng-重復的表現
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.