AngularJS使用$watch与$filter过滤器制作数据筛选实例

最新推荐文章于 2023-11-06 16:07:01 发布

K'illCode

最新推荐文章于 2023-11-06 16:07:01 发布

阅读量272

点赞数

分类专栏： angularJS 文章标签： angularJs

本文链接：https://blog.csdn.net/Dome_/article/details/79277374

版权

angularJS 专栏收录该内容

37 篇文章 0 订阅

订阅专栏

AngularJS使用$watch与$filter过滤器制作数据筛选实例，代码如下：

在搜索框中输入不同文字，然后表格中展示相应的搜索结果：

 
       01<!DOCTYPE html>
 
       02<html lang="en">
 
       03<head>
 
       04    <meta charset="UTF-8">
 
       05    <title>Title</title>
 
       06    <style type="text/css">
 
       07        .ng-cloak{display:none;}
 
       08        td{height:30px;line-height:30px;padding:0px 10px;text-align:center;}
 
       09    </style>
 
       10</head>
 
       11<body ng-app="app" ng-controller="ctrl" ng-cloak class="ng-cloak">
 
       12    <input type="text" ng-model="search" ng-model-options="{'updateOn':'blur'}"/>
 
       13    <table cellpadding="0" cellspacing="0" border="1">
 
       14        <thead>
 
       15            <tr>
 
       16                <td>姓名</td>
 
       17                <td ng-click="orderBy('age')">年龄</td>
 
       18                <td>性别</td>
 
       19                <td ng-click="orderBy('click')">点击</td>
 
       20            </tr>
 
       21        </thead>
 
       22        <tbody>
 
       23            <tr ng-repeat="v in tmp">
 
       24                <td>{{v.user}}</td>
 
       25                <td>{{v.age}}</td>
 
       26                <td>{{v.sex}}</td>
 
       27                <td>{{v.click}}</td>
 
       28            </tr>
 
       29        </tbody>
 
       30    </table>
 
       31</body>
 
       32</html>
 
       33<script type="text/javascript" src="../js/angular.min.js"></script>
 
       34<script type="text/javascript">
 
       35    var m = angular.module('app', []);
 
       36    m.controller('ctrl', ['$scope', '$filter', function($scope, $filter){
 
       37        $scope.search = '';
 
       38        $scope.data = [
 
       39            {user:'张三', age:23, sex:'男', click:100},
 
       40            {user:'李四', age:26, sex:'女', click:200},
 
       41            {user:'王五', age:24, sex:'男', click:300},
 
       42        ];
 
       43        //临时数据
 
       44        $scope.tmp = {};
 
       45        $scope.$watch('search', function(n, o){
 
       46            $scope.tmp = $filter('filter')($scope.data, n);
 
       47        })
 
       48    }]);
 
       49</script>