首页 > 代码库 > 用angular做的模糊搜索

用angular做的模糊搜索

今天大家来试一试用angular做一下简单的搜索功能吧;

首先我们需要写html的部分,我们需要设置几个条件,比如按什么来排序,按升序还是降序搜索,和一个文本框来设置模糊搜索;

<nav>

  <select ng-model="a">

    <option value="http://www.mamicode.com/num">按编号排序</option>

    <option value="http://www.mamicode.com/name">按姓名排序</option>

    <option value="http://www.mamicode.com/age">按年龄排序</option>

  </select>

  <select ng-model="b">

    <option value="">升序</option>

    <option value="">降序</option>

  </select>

  <input type="text" ng-model="s"/>

</nav>

设置上ng-model好在接下来用angular来获取动态的值,方便我们搜索,接下来我们先写js的部分吧;

首先我们需要先引入一个angular,在js中创建angular的模块部分和控制台。之后我们创建一个json文件来保存一下我们需要查询的数据,之后我们在控制台中获取一下这个json文件中的数据内容,方便我们导入到html中来搜索。

{

  "xinxi":[

    {"num":100,"name":"baobo","age":12},

    {"num":99,"name":"paopo","age":18},

    {"num":50,"name":"xinxin","age":55},

    {"num":55,"name":"angular","age":20},

    {"num":75,"name":"chali","age":15},

    {"num":85,"name":"each","age":60},

    {"num":98,"name":"hello","age":19},  

    {"num":68,"name":"zizizi","age":28},

    {"num":66,"name":"gegege","age":56},

    {"num":77,"name":"fufuf","age":43},

    {"num":42,"name":"baobo","age":12},

    {"num":54,"name":"menmen","age":32},

    {"num":88,"name":"qqqq","age":71},

    {"num":69,"name":"laowang","age":22},

    {"num":53,"name":"wangwang","age":99},

    {"num":1,"name":"dadad","age":88}

  ]

}

这是我所创建的json文件。

var app=angular.module("mk",[]);

app.controller("text",function($scope,$http){

  $http.get("paixu.json").success(function(data){

    $scope.data=http://www.mamicode.com/data.xinxi

    $scope.a="num"

  })

});

这是我所创建用来获取json文件的代码;

注意$scope.a = “num”;是为了和上面获取的动态数据相对应的,并且是让数据先按什么先排序。

之后我们只需要把这些数据填到html部分就可以了。

<table border="0px" id="table">

  <tr>

    <th>编号</th>

    <th>姓名</th>

    <th>年龄</th>

  </tr>

  <tr ng-repeat="value in data | orderBy:b+a | filter:s">

    <td>{{value.num}}</td>

    <td>{{value.name}}</td>

    <td>{{value.age}}</td>

  </tr>

</table>

ng-repeat="value in data | orderBy:b+a | filter:s;这是充分运用了angular中的过滤器属性,orderBy是排序问题,注意一定要先把升序和降序的动态数据放到前面防止出错,filter这个过滤器就是把我们所搜索的数据和我们的json数据库中作比较,json中哪一下标的数组中有我们搜索的数据就显示出来,没有则隐藏。

用angular做的模糊搜索