ng-repeat-fast
Version:
Faster ng-repeat realization that caches DOM nodes.
95 lines (83 loc) • 3.43 kB
HTML
<html>
<head lang="en">
<meta charset="UTF-8">
<title>fast-ng-repeat</title>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body ng-app="app" ng-controller="main">
<div class="container clearfix">
<section class="row">
<div class="col-xs-7">
<input type="search" ng-model="search" autofocus>
</div>
<div class="col-xs-1"></div>
<div class="col-xs-4 text-right">
<button ng-click="toggleFastRepeat()"
class="big"
style="width: 100%;"
ng-class="{ 'active': useFastRepeat }"
title="Use ng-repeat-fast instead of ng-repeat?">
{{ useFastRepeat ? 'fastRepeat' : 'ngRepeat' }}
</button>
</div>
</section>
<section class="row">
<div class="col-xs-10 text-left">
<button ng-click="addToBegin()">
<span class="glyphicon glyphicon-plus"></span> 1st
</button>
<button ng-click="add2nd()">
<span class="glyphicon glyphicon-plus"></span> 2nd
</button>
<button ng-click="addToEnd()">
<span class="glyphicon glyphicon-plus"></span> last
</button>
<button ng-click="reverse()">
<span class="glyphicon glyphicon-sort"
style="font-size: 16px; top: 2px;"></span>
</button>
<button ng-click="swap()">
1 <span class="glyphicon glyphicon-retweet"></span> 2
</button>
</div>
<div class="col-xs-2 text-right">
<button ng-click="list = []">
<span class="glyphicon glyphicon-remove"
style="font-size: 16px; top: 2px;"></span>
</button>
</div>
</section>
<section class="row">
<div class="col-xs-12">
<div class="list" ng-if="!useFastRepeat">
<div class="list-item"
ng-repeat="item in list | filter: search"
ng-include="'item-template'">
</div>
</div>
<div class="list" ng-if="useFastRepeat">
<div class="placeholder">------</div>
<div class="list-item"
ng-repeat-fast="item in list | filter: search">
<span ng-include="'item-template'"></span>
</div>
<div class="placeholder">------</div>
</div>
</div>
</section>
</div>
<script src="js/angular/angular.js"></script>
<script src="js/f-xyz-diff-0.1.22.js"></script>
<script src="../src/index.js"></script>
<!--<script src="../dist/ng-repeat-fast-0.2.20.min.js"></script>-->
<script src="main.js"></script>
<script type="text/ng-template" id="item-template">
<span ng-include="'item-template-inner'"></span>
</script>
<script type="text/ng-template" id="item-template-inner">
<span ng-bind-html="item.value | highlight: search"></span>
</script>
</body>
</html>