Geek Answers Handbook

Custom directive (e.g. ng-repeat)

I tried many different things to fix ng-repeat performance issues. including the description described here: How to disable an expression

I need to have a large set of lines per page up to ~ 1000 lines. With each line containing a lot of things. And it seems to me that it will be very slow with ng-repeat , I think I need to create either my own custom ng-repeat , or I need to create a directive that will build each row in the table ... I also don’t know how it to do. Can you guys help me please. Can you show me some examples.

+8
angularjs ng-repeat
source share
3 answers

Below is an example of filling <dl> with <dt> s and <dd> s ...

Step 01 - create the file widge.product.details.js

// binds to $ scope.details = [] // array object

 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>') ); }); }); }

Step 02 - create your html

 <div class="span7" ng-controller="ProductInfoCtrl"> <product-details></product-details> </div>

Step 03 - create app.product.js

 function ProductInfoCtrl($scope) { $scope.details = [ {dt:'condition',dd:'brand new'}, {dt:'year bought',dd:'3 years ago'}, ] }
+11
source share
 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; } } } });
+4
source share

Simple code for the custom ngReapeat directive in angularJS:

  <!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 code

  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'} ]; }
0
source share

More articles:


All Articles