我尝试了许多不同的方法来解决ng-repeat
. 包括此处描述的内容:如何“取消观看”表达式
我需要在页面上有一大组行,最多 1000 行。每一行都包含相当多的东西。现在在我看来,它会很慢ng-repeat
,我想我必须构建自己的自定义ng-repeat
或者我必须构建一个指令来构建表格中的每一行......我不知道如何做任何一个。你们能帮帮我吗?你能告诉我一些例子吗?
我尝试了许多不同的方法来解决ng-repeat
. 包括此处描述的内容:如何“取消观看”表达式
我需要在页面上有一大组行,最多 1000 行。每一行都包含相当多的东西。现在在我看来,它会很慢ng-repeat
,我想我必须构建自己的自定义ng-repeat
或者我必须构建一个指令来构建表格中的每一行......我不知道如何做任何一个。你们能帮帮我吗?你能告诉我一些例子吗?
这是用 <dt>s 和 <dd>s 填充 <dl> 的示例...
// 绑定到 $scope.details = [] //数组对象
angular.module('widget.product.details',[])
.directive('productDetails',function(){
return {
template:'<dl class="dl-horizontal"></dl>',
replace:true,
restrict:'E',
compile : function compile(tElement, tAttrs, transclude) {
return {
post: createProductDetails
}
}
}
});
var createProductDetails = function (scope, iElement, iAttrs, controller) {
scope.$watch('details', function(newVal, oldVal) {
angular.forEach(newVal, function(v,k){
iElement.append( angular.element('<dt>'+v.dt+'</dt><dd>'+v.dd+'</dd>') );
});
});
}
<div class="span7" ng-controller="ProductInfoCtrl">
<product-details></product-details>
</div>
function ProductInfoCtrl($scope) {
$scope.details = [
{dt:'condition',dd:'brand new'},
{dt:'year bought',dd:'3 years ago'},
]
}
angular.module('setRepeat',[]).directive('setRepeat', function () {
return {
transclude: 'element',
priority: 1000,
compile: compileFun
};
function compileFun(element, attrs, linker) {
var expression = attrs.setRepeat.split(' in ');
expression = {
child : expression[0],
property : expression[1]
};
return {
post: repeat
};
function repeat(scope, iele, iattrs /*, attr*/) {
var template = element[0].outerHTML;
var data = scope.$eval(expression.property);
addElements(data,scope,iele);
return;
function makeNewScope (index, expression, value, scope, collection) {
var childScope = scope.$new();
childScope[expression] = value;
childScope.$index = index;
childScope.$first = (index === 0);
childScope.$last = (index === (collection.length - 1));
childScope.$middle = !(childScope.$first || childScope.$last);
/**
*
* uncomment this if you want your children to keep listening for changes
*
**/
//childScope.$watch(function updateChildScopeItem(){
//childScope[expression] = value;
//});
return childScope;
}
function addElements (collection, scope, insPoint) {
var frag = document.createDocumentFragment();
var newElements = [], element, idx, childScope;
angular.forEach(data, function(v,i){
childScope = makeNewScope(i,expression.child,v,scope,collection);
element = linker(childScope, angular.noop);
newElements.push(element);
frag.appendChild(element[0]);
});
insPoint.after(frag);
return newElements;
}
}
}
});
angularJS 中自定义 ngReapeat 指令的简单代码:
<!DOCTYPE html>
<html>
<head>
<script type='text/javascript' src='angular.min.js'></script>
</head>
<body ng-app="customNgReapeat">
<div ng-controller='ProductInfoCtrl'>
<div custom-repeat></div>
</div>
</body>
</html>
JS代码
var csREapeat = angular.module('customNgReapeat', [])
.directive('customRepeat', function() {
return {
restrict: 'A',
link: function(scope, iElement, iAttrs, controller) {
angular.forEach(scope.details, function(v, k) {
iElement.append(angular.element('<div>' + v.name + '</div> <div>' + v.address + '</div>'));
});
}
};
})
function ProductInfoCtrl($scope) {
$scope.details = [
{name: 'Nidhi', address: 'India-Gurgaon'},
{name: 'Khushi', address: 'India-Ghazipur'}
];
}