AngularJS基于AngularJS的过滤与排序

style=”font-size: 13px; color: #000080;”>前面了解了AngularJS的采取办法,这里虽大概的描绘单稍序,实现查询过滤和排序的法力。

style=”font-size: 13px; color: #000080;”>本程序中可了解及:

  1
angularjs之过滤器

  2
ng-repeat的行使方式

  3
控制器的运

  4 数据的绑定

  程序设计分析

  首先,如果假定是先查询过滤,就要用到AngularJS中的 过滤器filter 了。

  直接当表达式的后使用管道命令符 |
,按照下面的写法就足以上一个过滤的效益:

{{ persons | filter:query }}

  通过以filter落实过滤操作,query是询问过滤时输入的字符串。

  类似地,使用orderBy不怕可以实现排序的效用:

{{ persons | filter:query | orderBy:order }}

  上面的查询以及排序涉及到片个变量,query和order。在此地直接动用ng-model实现数量的绑定即可:

            Search:<input ng-model="query">
            Sort by:<select ng-model="order">
                <option value="name">name</option>
                <option value="age">age</option>
            </select>

 

  AngularJS是相同门基于DOM的框架语言,因此无需贯彻其他的监听器以及事件触发器,当query所当的输入框来其他变动时,就会见沾发输入框与下部的表达式展现的双向刷新!

  相比于其它的片段框架,是因字符串通过DOM节点innerHTML添加至DOM中,AngularJS的实现方式加快了型与视图的显现。并且减少了汪洋免必要的监听器啊触发器啊之类的代码的编辑,真正实现了看似spring的功力~

 

  数据的呈现,可以经ng-repeat落实。当网页解析及ng-repeat的时段,会为各个一个数组中之素都克隆一客标签,进行编译解析。

  

       <ul class="persons">
                <li ng-repeat="person in persons | filter:query | orderBy:order">
                    {{person.name}}

                    {{person.age}}
                </li>
            </ul>

 

  剩下的行事便是需要以script中进行perons数组的初始化:

        <div ng-controller="ctl">
                    ...
        </div>
        <script type="text/javascript">
            function ctl($scope){
                $scope.persons = [
                    {"name":"xingoo","age":25},
                    {"name":"zhangsan","age":18},
                    {"name":"lisi","age":20},
                    {"name":"wangwu","age":30}
                ];
                $scope.order = "age";
            }
        </script>    

  代码和结果

  最后贴上举的代码:

AngularJS 1AngularJS 2

<!doctype html>
<html ng-app>
    <head>
         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
         <script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>

    </head>
    <body>
        <div ng-controller="ctl">
            Search:<input ng-model="query">
            Sort by:<select ng-model="order">
                <option value="name">name</option>
                <option value="age">age</option>
            </select>

            <ul class="persons">
                <li ng-repeat="person in persons | filter:query | orderBy:order">
                    {{person.name}}

                    {{person.age}}
                </li>
            </ul>
        </div>
        <script type="text/javascript">
            function ctl($scope){
                $scope.persons = [
                    {"name":"xingoo","age":25},
                    {"name":"zhangsan","age":18},
                    {"name":"lisi","age":20},
                    {"name":"wangwu","age":30}
                ];
                $scope.order = "age";
            }
        </script>
    </body>
</html>

View Code

  使用结果:

  以默认情况下,使用age进行排序:

AngularJS 3

  通过选择虽好采取name排序

AngularJS 4

  再输入字符的当儿,会活动过查询过滤掉一部分选择

AngularJS 5

相关文章