首页 > 编程 > JavaScript > 正文

angularJs使用$watch和$filter过滤器制作搜索筛选实例

2019-11-19 16:26:54
字体:
来源:转载
供稿:网友

整理文档,搜刮出一个angularJs使用$watch和$filter过滤器制作搜索筛选,稍微整理精简一下做下分享。

<div ng-app="module" ng-controller="ctrl">  搜索: <input type="text" ng-model="search">  <table border="1" width="600">    <tr>      <td>编号</td>      <td>点击数</td>      <td>标题</td>    </tr>    <tr ng-repeat="(k,v) in lists">      <td>{{v.id}}</td>      <td>{{v.click}}</td>      <td>{{v.title}}</td>    </tr>  </table></div><script>  var m = angular.module('module', []);  m.controller('ctrl', ['$scope', '$filter', function ($scope, $filter) {    $scope.data = [      {id: 1, click: 100, title: '百度'},      {id: 2, click: 200, title: '腾讯'},      {id: 3, click: 300, title: '谷歌'},    ];    //临时数据用于显示    $scope.lists = $scope.data;    $scope.$watch('search',function(n,o){      $scope.lists = $filter('filter')($scope.data,n);    });  }]);</script>

效果图:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持武林网。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表