AngularJS使用自定义指令替代ng-repeat的方法  更新时间:2016年09月17日 15:48:25   投稿:daisy   这篇文章主要介绍了另一种即具有与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以下的旧版本,是不支持的一次性绑定语法的。那么最好的方法就是自定义指令,换言之,静态数据可以使用一些简单的方法来格式化。 实现步骤 1、首先创建无序列表,用于保存动态绑定的内容。 创建UL标签作为容器用于显示列表 我们选择动态加载List中的数据,首先添加div标签,并命名为”repeater-alternative”用于渲染流中。 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 + [”, ” + item.FirstName + ‘ ‘, ” + item.LastName + ‘ ‘, ” + item.Country+ ‘ ‘, ” + item.Id + ‘ ‘, ” + $filter(‘date’)(item.BirthDate, ‘dd-MMM-yyyy’) + ‘ ‘, ”].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 + [”, ” + item.FirstName + ‘ ‘, ” + item.LastName + ‘ ‘, ” + item.State + ‘ ‘, ” + item.Id + ‘ ‘, ” + $filter(‘date’)(item.BirthDate, ‘dd-MMM-yyyy’) + ‘ ‘, ”].join(”); }); }) 接下来就是将内容渲染到表格控件中,也就是HTMLrepeater-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 + [”, ” + item.FirstName + ‘ ‘, ” + item.LastName + ‘ ‘, ” + item.State + ‘ ‘, ” + item.Id + ‘ ‘, ” + $filter(‘date’)(item.BirthDate, ‘dd-MMM-yyyy’) + ‘ ‘, ”].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渲染完成的两种方法 angularjs ng repeat 相关文章 Angular Renderer (渲染器)的具体使用 这篇文章主要介绍了Angular Renderer (渲染器)的具体使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2018-05-05 AngularJS指令详解及示例代码 本文主要介绍AngularJS指令,这里整理了简单的指令并附示例代码,有需要的小伙伴可以参考下 2016-08-08 Angular.JS读取数据库数据调用完整实例 这篇文章主要介绍了Angular.JS读取数据库数据调用,结合完整实例形式分析了AngularJS使用$http.get方法与后台php交互读取数据库数据相关操作技巧,需要的朋友可以参考下 2019-07-07 angular第三方包开发整理(小结) 本篇文章主要介绍了angular第三方包开发整理(小结),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2018-04-04 angular中的post请求处理示例详解 这篇文章主要给大家介绍了关于angular中post请求处理的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者使用angular具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧 2020-06-06 Angular4自制一个市县二级联动组件示例 本篇文章主要介绍了Angular4自制一个市县二级联动组件示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2017-11-11 Angular2使用Augury来调试Angular2程序 这篇文章主要介绍了Angular2使用Augury来调试Angular2程序,非常具有实用价值,需要的朋友可以参考下 2017-05-05 AngularJS前端页面操作之用户修改密码功能示例 这篇文章主要介绍了AngularJS前端页面操作之用户修改密码功能,结合具体实例形式分析了AngularJS针对前端用户修改密码的判断操作实现技巧,需要的朋友可以参考下 2017-03-03 浅谈Angularjs link和compile的使用区别 下面小编就为大家带来一篇浅谈Angularjs link和compile的使用区别。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2016-10-10 Angular动态绑定样式及改变UI框架样式的方法小结 AngularJS 是一个 JavaScript 框架。它是一个以 JavaScript 编写的库。这篇文章主要介绍了Angular动态绑定样式及改变UI框架样式的方法小结,需要的朋友可以参考下 2018-09-09 最新评论

前言

大家都知道对于处理小数量,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渲染完成的两种方法
张贴在3