需求:当输入框输入用户姓名时,将数据库中可以匹配到的数据都显示出来,模糊查询的方式进行显示。
前台页面使用html和angularjs进行实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1.0">
<title>angular gtest</title>
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="myController">
<div ng-init="myArr = list">
Name:<input ng-model="yourName" ng-change="myChange()"/>
<div ng-repeat="u in list | filter:{name:yourName}:false ">
<p>Name:{{u.name}}</p>
<p>Age:{{u.age}}</p>
</div>
</div>
</div>
</body>
<script type="text/javascript">
var myApp = angular.module("myApp",[]);
myApp.controller("myController",['$scope','$filter',function ($scope,$filter) {
$scope.myChange =function(){
$scope.list = [{name:'Tom',age:20}, {name:'Tom Senior',age:50}, {name:'May',age:21}, {name:'Jack',age:20}, {name:'Alice',age:22}];
}
}]);
</script>
</html>
页面效果