60 lines
1.9 KiB
HTML
Executable File
60 lines
1.9 KiB
HTML
Executable File
<!DOCTYPE html>
|
|
<html ng-app="myApp">
|
|
<head>
|
|
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
|
|
<title>Angular truncate text filter demo</title>
|
|
<script src="../test/lib/angular/angular.min.js"></script>
|
|
<script src="../src/truncate.js"></script>
|
|
<script src="js/app.js"></script>
|
|
</head>
|
|
<body ng-controller="demoController">
|
|
<div class="container">
|
|
|
|
<h2>Angular Truncate Demo</h2>
|
|
|
|
<div class="hero-unit">
|
|
<h4>Example Text</h4>
|
|
<textarea ng-model="text" rows="3" placeholder="Enter test text"></textarea>
|
|
<br><br>
|
|
<strong>Truncate by characters</strong>
|
|
<label>Number of characters (will not break on a word):
|
|
|
|
<input ng-model="numChars" type="number"/></label>
|
|
<label>Break in the middle of words <input type="checkbox" ng-model="breakOnWord"/></label>
|
|
|
|
<h4>Output</h4>
|
|
|
|
<div class="well text-info">
|
|
<p>
|
|
{{ text | characters:numChars : breakOnWord }}
|
|
</p>
|
|
</div>
|
|
<h4>Code</h4>
|
|
<pre>{<span></span>{ text | characters:{{ numChars }}: {{ breakOnWord }}<span></span>}</pre>
|
|
</div>
|
|
<div class="hero-unit">
|
|
<strong>Truncate by words</strong>
|
|
<label>Number of words:
|
|
<input ng-model="numWords" type="number"/>
|
|
</label>
|
|
<h4>Code</h4>
|
|
<pre>{<span></span>{ text | words:{{ numWords }}:ignoreSpaces }<span></span>}</pre>
|
|
|
|
<h4>Output</h4>
|
|
|
|
<div class="well text-info">
|
|
<p>
|
|
{{ text | words:numWords }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<br><br>
|
|
<hr/>
|
|
<p>
|
|
<a href="https://raw.github.com/sparkalow/angular-infinite-scroll/master/src/infinite-scroll.js" class="btn btn-primary">Download</a><span class="help-inline">infinite-scroll.js</span>
|
|
</p>
|
|
</div>
|
|
</body>
|
|
</html>
|