我正在编写一个非常基本的页面来跟踪特定客户的内部工作和项目。我想允许用户编辑页面上显示的当前条目。我写了这个部分，它基本上重复了数据库中的所有条目。然后，在单击时显示编辑表单，该表单是根据重复值自动填充的。效果很好，但现在我担心性能。每个条目都有大量的额外代码，如果我理论上有数百个这样的代码，这似乎是一种非常低效的方法。
这是我目前所拥有的:
<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);
执行我传递值的功能。但不完全确定这是否比我拥有的更好。
最佳答案
在 10,000 时似乎有点慢，但在 1,000 时仍然很快。 See this 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)。这应该会让客户端体验保持快速。
关于javascript - Angular ng-repeat 和表单性能，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26049508/