Bootstrap + AngularJS 实现简单的数据过滤字符查找功能
更新时间：2017年07月27日 14:20:55 作者：海哥_大大的Java
这篇文章主要介绍了 Bootstrap + AngularJS 实现简单的数据过滤字符查找功能，代码简单易懂，非常不错具有参考借鉴价值,需要的朋友可以参考下
具体代码如下所示：
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 实现简单的数据过滤字符查找，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
angular6 利用 ngContentOutlet 实现组件位置交换(重排)
这篇文章主要介绍了angular6 利用 ngContentOutlet 实现组件位置交换(重排)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-11-11
这篇文章主要介绍了AngularJs实现ng1.3+表单验证，感兴趣的小伙伴们可以参考一下2015-12-12
今天小编就为大家分享一篇AngularJS 监听变量变化的实现方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-10-10
本文给大家分享在使用angular上传图片的功能，在开发过程中遇到很多问题，最终都解决了，今天小编给大家介绍下Angular下H5上传图片的方法（可多张上传),非常不错，需要的朋友参考下2017-01-01
当Angular项目的规模到达一定的程度，就需要进行测试工作了。为什么要自动化测试？1，提高产出质量。2，减少重构时的痛。反正我最近重构多了，痛苦经历多了。3，便于新人接手。下面这篇文章就给大家详细介绍了Angular.Js的自动化测试，有需要的朋友们可以参考借鉴。2016-12-12
Directive是一个非常棒的功能。可以实现我们自义的的功能方法。下面通过实例代码给大家介绍Angularjs自定义指令Directive相关知识，感兴趣的朋友一起学习吧2017-05-05
这篇文章主要为大家深入解析了Angular动态导入和懒加载实例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-10-10
这篇文章主要介绍了Angular 组件之间的交互的示例代码，根据数据的传递方向，分为父组件向子组件传递、子组件向父组件传递及通过服务传递三种交互方法。非常具有实用价值，需要的朋友可以参考下2018-03-03
本篇文章主要介绍了Angular 5 给组件本身的标签添加样式class的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-04-04
这篇文章主要介绍了angularjs中的e2e测试实例,本文使用Protractor来完成e2e测试,需要的朋友可以参考下2014-12-12
最新评论