Bootstrap + AngularJS 实现简单的数据过滤字符查找功能
程序员文章站
2022-04-09 22:18:52
具体代码如下所示：
find.html
&...
具体代码如下所示：
find.html
<!doctype html>
<html ng-app="find">
<head>
<title>字符查找</title>
<meta charset="utf-8"/>
<script src="../script/angular.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="../bootstrap-3.0.0/css/bootstrap.css" rel="external nofollow" >
<style type="text/css">
body{
font-size: 12px;
}
ul{
list-style-type: none;
width: 408px;
margin:0px;
padding: 0px;
}
ul li {
float: left;
padding: 5px 0px;
}
ul .bold {
font-weight: bold;
cursor: pointer;
}
ul li span {
width: 70px;
float: left;
padding: 0px 10px;
}
ul .focus {
background-color: #cccccc;
}
</style>
<script type="text/javascript">
var find = angular.module('find', []);
find.controller('find_name', ['$scope', function ($scope) {
$scope.bold = "bold";
$scope.key = '';
$scope.data = [
{ name: "张小琴", sex: "女", age: 24, score: 95 },
{ name: "李清思", sex: "女", age: 27, score: 87 },
{ name: "杨旭旭", sex: "男", age: 28, score: 86 },
{ name: "陈楚圣", sex: "男", age: 23, score: 97 }
];
}])
</script>
</head>
<body>
<div ng-controller="find_name" align="center">
<div class="panel panel-primary" align="center" style="height: 300px">
<div class="panel-heading" align="center">
<div class="panel-title" style="font-size: 22px">字符查找</div>
</div>
<div>
<input id="txtkey" type="text" ng-model="key"
style="margin-top: 10px; height: 30px;width: 200px;" placeholder="请输入姓名关键字" />
</div>
<ul>
<li ng-class="{{bold}}" style="font-size: 16px; margin-top: 5px;">
<span>序号</span>
<span>姓名</span>
<span>性别</span>
<span>年龄</span>
<span>分数</span>
</li>
<li ng-repeat=" stu in data | filter : {name:key}" style="font-size: 16px">
<span>{{$index+1}}</span>
<span>{{stu.name}}</span>
<span>{{stu.sex}}</span>
<span>{{stu.age}}</span>
<span>{{stu.score}}</span>
</li>
</ul>
</div>
</div>
</body>
</html>
截图：
以上所述是小编给大家介绍的bootstrap + angularjs 实现简单的数据过滤字符查找，希望对大家有所帮助