首页 > 代码库 > 用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做的模糊搜索