引言
本文主要介绍了另一种即具有与 ng-repeat 一样处理大量数据的绑定的功能，又具有超高的性能。
对于处理小数量，ng-repeat 是非常有用的，但是如果需要处理非常大的数量集，还是采用自定义的方法更好一些。
也别是数据大多都是静态的或已预存储好的，这个时候应避免使用 ng-repeat 指令。
ng-repeat 中的表达式和 $watch
Angular 中的表达式都会创建 $watch 的Scope 函数。用于监听模型变化，当你的模型部分发生变化时它会通知你。在 ng-repeat 指令中，如果某行数据有15列数据都绑定了表达式，如果数据有1000多行的话，那么 $watch 就将近15000个，这性能简直难以想象。
所以当我们想要实现 ng-repeat 的功能又想兼备性能，那只能另找一种方法了。
替换 ng-repeat 的方法
如果内容是静态的，我们不需要两种方式的绑定，只需要执行一次赋值语句{{::value}}就可以。如果 anguluarJS 是1.3以下的旧版本，是不支持的一次性绑定语法的。那么最好的方法就是自定义指令，换言之，静态数据可以使用一些简单的方法来格式化。
实现步骤
首先创建无序列表，用于保存动态绑定的内容。
创建 UL 标签作为容器用于显示列表
我们选择动态加载 List 中的数据，首先添加 div 标签，并命名为 "repeater-alternative" 用于渲染流中。
定义 List 数据：
//示例数据 var studentsList =
[
{
FirstName: "Raj,
LastName : "B",
Country : "India",
BirthDate: "01/01/1990"
},
{
FirstName: "Kumar,
LastName : "S",
Country : "India",
BirthDate: "01/01/1990"
},
..................
..................
..................
..................
];
$scope.collectionObject = studentsList; //分配给$scope函数
实际 List 内容
主要目的适用于重复集合对象，并显示到列表中，所以需要制定访问循环的逻辑，并按照需求来格式化字符串。
var tableRow = "";
angular.forEach($scope.collectionObject, function (item) {
tableRow = tableRow + ['
'
'
'
'
'
'
});
List 格式化逻辑
一旦 collectionObject 的值已被赋给其他变量，就需要定义显示数据的表格。
如何获取分配 CollectionObject 的时间
Angular 会监控 $scope 变量值得改变，一旦值被修改，则 $watch 将被触发，所以需要将CollectionObject 赋值逻辑放到 $scope 变量的 $watch 中。代码如下：
$scope.$watch($scope.object, function (oldValue, newValue) {
})
即，当我们执行赋值语句是，Angular 会处理这个事件，并格式化 List 的内容。
$scope.$watch('collectionObject', function (oldValue, newValue) {
var tableRow = "";
angular.forEach($scope.collectionObject, function (item) {
tableRow = tableRow + ['
'
'
'
'
'
});
})
接下来就是将内容渲染到表格控件中，也就是HTML
repeater-alternative标签中。首先必须理解 Angular 的 Directive 机制，简单而言，就是我们来指示 Angular ,当指定的变量被发现，就开始执行后台操作。
var userDirectives = angular.module([]);
userDirectives.directive('DOMElementFound', function () {
return {
replace: true,
link: function ($scope, $elem, attrs) {
//后台处理操作
}
}
});
我们会通知 Angular，当发现 "repeater-alternative" 元素，则将以下数据渲染到列表行中。代码如下：
var userDirectives = angular.module([]);
userDirectives.directive('repeaterAlternative', function () {
return {
replace : true,
link: function ($scope, $elem, attrs) {
$scope.$watch('collectionObject', function (oldValue, newValue) {
var tableRow = "";
angular.forEach($scope.collectionObject, function (item) {
tableRow = tableRow + ['
- ',
'].join('');'
' + item.FirstName + '','
' + item.LastName + '','
' + item.State + '','
' + item.Id + '','
' + $filter('date')(item.BirthDate, 'dd-MMM-yyyy') + '', '});
//If IE is your primary browser, innerHTML is recommended to increase the performance
$elem.context.innerHTML = tableRow;
//If IE is not your primary browser, just appending the content to the element is enough .
//$elem.append(tableRow);
});
}
}
});
总结
在本文中，主要模拟了 ng-repeat 的工作方式和逻辑，但只限于静态内容，所以输出结果与调用 ng-repeat 结果相同，但是渲染更快，因为该方法只有一种数据绑定方式和少量的 $watch。
支持 AngularJS 的控件集
Wijmo天生就支持了 AngularJS 框架，现在 Wijmo 又全球第一个支持 AngularJS 2 框架。Wijmo 中提供了大量的支持 AngularJS 及 AngularJS 2 的Demo。
Wijmo 是为企业应用程序开发而推出的一系列包含 HTML5 和 JavaScript 的开发控件集。
它包含 Wijmo 5（先进的JavaScript控件）、Wijmo 3（经典的jQuery小部件）、金融图表、FlexSheet、OLAP。无论您的应用程序是移动端、PC端、还是必须要支持IE6，Wijmo Enterprise 均能满足您的需求。
免费试用
请通过以下方式联系葡萄城，获取 Wijmo 的免费试用版及全功能演示：
微信：GrapeCityDT
邮件：marketing.xa@grapecity.com
官网：wijmo.gcpowertools.com.cn
关于葡萄城控件
葡萄城是一家跨国软件研发集团，专注控件领域近30年，是全球最大的控件提供商，也是微软认证的金牌合作伙伴。
- ',