使用 limitTo 这个过滤器，我们可以去限制一个字符串显示的字符数，也可以限制一个数组显示的项目数。比如在这个电视剧列表里，我想限制电视剧介绍内容的显示的字数。先看一下 app.js ... 这个介绍的内容属性 description 这个属性 ..

再打开 index.html .. 在这里我绑定输出了 description 里的内容 ... 我们可以在这加上一个 limitTo 过滤器 ... 后面先输入一个竖线 ... 然后是过滤器的名字 limitTo .. 冒号的右边就是表示限制的数量 .. 比如我们要限制只显示 200 个字符 ... 输入 200 ... 保存 ...

浏览器上会显示限制字数之后的电视剧的描述 ...

下面我们再用 limitTo 过滤器，去限制一下这个电视剧列表的显示的数量 ... 在这个 ng-repeat 里面，加上一个竖线 .. 然后是 limitTo .. 冒号 ... 接着是要限制显示的数量 ... 比如输入 3 .. 保存 .. . 你会看到浏览器上只会显示三个项目 ... 输入 2 .. 再保存 ... 现在只会显示两条 .. .

这个数字也可以是一个负数，这样会从后往前去限制显示 ... 比如输入 -3 ... 保存 ... 现在显示的是原来列表里面的倒数的三个项目 .. 也就是最后的三个项目 ...

<li ng-repeat="show in shows | limitTo: 3">

这个限制的数量我们可以让它跟一个文本字段绑定到一块，这样就可以通过这个字段去控制限制的数量了。在上面添加一个 input 元素 ... 类型是 number ，数字类型的文本字段 ... 给它绑定一个模型 ... 比如叫它 limit ...

然后在 limitTo 这个过滤器的后面 ... 去使用这个 limit ...

<input type="number" ng-model="limit">
<li ng-repeat="show in shows | limitTo: limit">

保存 ... 现在浏览器上没有显示任何的列表项目 ... 因为 limit 这个字段还没有值 ... 在这里字段里输入一个数字，或者点击右边的增加还有减少的按钮 ... 你会发现，项目显示的数量，会根据这个字段里的值 ... 3 就会显示三个项目 ... 如果是 -3 ，显示的就是倒数三个项目 ...

我们也可以给这个字段一个初始的值 ... 打开 app.js ，找到 ShowController 这个控制器 ... 在这里，我们去设置一下 limit 的值 ...

$scope.limit = 5;

保存 .. 现在，这个列表页面默认会显示 5 个项目 ...