AngularJS 互动版

在线工具推荐: Three.js AI纹理开发包 - YOLO合成数据生成器 - GLTF/GLB在线编辑 - 3D模型格式在线转换 - 可编程3D场景编辑器

过滤器


  1. filter过滤器可以过滤数组并从中选择出一个子集出来,用法是“filter:模型名称”,示例如下:
<div ng-app="" ng-init="friends = [
   {name:'tom', age:16},
   {name:'jerry', age:20}, 
   {name:'garfield', age:22}]">

    输入过滤:<input type="text" ng-model="name" >
    <ul style="list-style-type:none">
        <li>   姓名,年龄</li>
        <li  ng-repeat="x in friends | filter:name">   
            {{ x.name + ' , ' + x.age }}
        </li>
    </ul>    
</div>

看到输出结果了吧,filter过滤器是不是很强大而且用法超简单就实现了对数据的简单过滤,如果不使用它,那我们想要实现这个数据过滤效果是不是要相当麻烦(可以自己试试如何实现),而现在只需那么简单,足以彰显AngularJS是多么的给力呀!