用angular做的模糊搜索

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

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

<nav>

　　　　<option value="num">按编号排序</option>

　　　　<option value="name">按姓名排序</option>

　　　　<option value="age">按年龄排序</option>

　　</select>

　　</select>

</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=data.xinxi

　　　　$scope.a="num"

　　})

});

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

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

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

　　<tr>

　　</tr>

　　　　<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做的模糊搜索

最新文章

热门文章