angular 过滤器的经典用法（排序，搜素）

最新推荐文章于 2018-10-18 19:47:32 发布

原创最新推荐文章于 2018-10-18 19:47:32 发布 · 263 阅读

0 ·

CC 4.0 BY-SA版权

本文展示了一个使用AngularJS实现的动态列表过滤和排序的例子。通过输入框进行搜索过滤，并可以选择按名称或年龄进行排序。代码中包含了HTML结构与AngularJS的交互逻辑。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body ng-app="myApp">
<div ng-controller="costCtrl">
    搜索:<input ng-model="query">
    类型:
    <select ng-model="order">
            <option value="name">name</option>
            <option value="age">age</option>
    </select>
<ul>
    <li ng-repeat="n in list | filter:query | orderBy:order">
        {{n.name}}

        {{n.age}}


    </li>
</ul>
</div>

<script src="libs/angular.js"></script>
<script>
    (function () {
        var app=angular.module("myApp",[]);
        app.controller("costCtrl",function ($scope) {
            $scope.list= [
                {"name":"xingoo","age":25},
                {"name":"zhangsan","age":18},
                {"name":"lisi","age":20},
                {"name":"wangwu","age":30}
            ];
           $scope.order = "age";
        })
    })()

</script>
</body>
</html>