AngularJS使用自定义指令替代ng-repeat的方法
投稿:daisy
前言
大家都知道对于处理小数量,ng-repeat是非常有用的,但是如果需要处理非常大的数量集,还是采用自定义的方法更好一些。特别是数据大多都是静态的或已预存储好的,这个时候应避免使用ng-repeat指令。
ng-repeat中的表达式和 $watch
Angular中的表达式都会创建$watch
的Scope
函数。用于监听模型变化,当你的模型部分发生变化时它会通知你。在ng-repeat指令中,如果某行数据有15列数据都绑定了表达式,如果数据有1000多行的话,那么$watch
就又奖金15000个,这性能简直难以想象。
所以当我们想要实现ng-repeat的功能又想兼备性能,那只能另找一种方法了。
替换ng-repeat的方法
如果内容是静态的,我们不需要两种方式的绑定,只需要执行一次赋值语句{{::value}}
就可以。如果anguluarJS是1.3以下的旧版本,是不支持的一次性绑定语法的。那么最好的方法就是自定义指令,换言之,静态数据可以使用一些简单的方法来格式化。
实现步骤
1、首先创建无序列表,用于保存动态绑定的内容。
创建UL标签作为容器用于显示列表
我们选择动态加载List中的数据,首先添加div标签,并命名为"repeater-alternative"用于渲染流中。
<div> <ul> <div repeater-alternative></div> </ul> </div>
2、定义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函数
3、实际List内容
主要目的适用于重复集合对象,并显示到列表中,所以需要制定访问循环的逻辑,并按照需求来格式化字符串。
var tableRow = ""; angular.forEach($scope.collectionObject, function (item) { tableRow = tableRow + ['<li>', '<div class="col-md-1">' + item.FirstName + '</div> ', '<div class="col-md-1 ">' + item.LastName + '</div> ', '<div class="col-md-1 ">' + item.Country+ '</div> ', '<div class="col-md-1 ">' + item.Id + '</div> ', '<div class="col-md-1 ">' + $filter('date')(item.BirthDate, 'dd-MMM-yyyy') + '</div> ', '</li>'].join(''); });
4、List格式化逻辑
一旦collectionObject
的值已被赋给其他变量,就需要定义显示数据的表格。
5、如何获取分配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 + ['<li>', '<div class="col-md-1">' + item.FirstName + '</div> ', '<div class="col-md-1 ">' + item.LastName + '</div> ', '<div class="col-md-1 ">' + item.State + '</div> ', '<div class="col-md-1 ">' + item.Id + '</div> ', '<div class="col-md-1 ">' + $filter('date')(item.BirthDate, 'dd-MMM-yyyy') + '</div> ', '</li>'].join(''); }); })
接下来就是将内容渲染到表格控件中,也就是HTML<DIV>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 + ['<li>', '<div class="col-md-1">' + item.FirstName + '</div> ', '<div class="col-md-1 ">' + item.LastName + '</div> ', '<div class="col-md-1 ">' + item.State + '</div> ', '<div class="col-md-1 ">' + item.Id + '</div> ', '<div class="col-md-1 ">' + $filter('date')(item.BirthDate, 'dd-MMM-yyyy') + '</div> ', '</li>'].join(''); }); //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通过指令监听ng-repeat渲染完成后执行脚本的方法
- AngularJs ng-repeat 嵌套如何获取外层$index
- AngularJS 获取ng-repeat动态生成的ng-model值实例详解
- AngularJS入门(用ng-repeat指令实现循环输出
- Angularjs的ng-repeat中去除重复数据的方法
- AngularJS使用ng-repeat指令实现下拉框
- AngularJS基础 ng-repeat 指令简单示例
- Angularjs渲染的 using 指令的星级评分系统示例
- Angular ng-repeat遍历渲染完页面后执行其他操作详细介绍
- Angular.js中下拉框实现渲染html的方法
- Angular将填入表单的数据渲染到表格的方法
- AngularJS监听ng-repeat渲染完成的两种方法