Bootstrap + AngularJS 实现简单的数据过滤字符查找功能


Posted in Javascript onJuly 27, 2017

 具体代码如下所示:

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 实现简单的数据过滤字符查找功能

Bootstrap + AngularJS 实现简单的数据过滤字符查找功能

以上所述是小编给大家介绍的Bootstrap + AngularJS 实现简单的数据过滤字符查找,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Jquery颜色选择器ColorPicker实现代码
Nov 14 Javascript
JavaScript避免内存泄露及内存管理技巧
Sep 05 Javascript
node.js中的定时器nextTick()和setImmediate()区别分析
Nov 26 Javascript
javascript删除一个html元素节点的方法
Dec 20 Javascript
详解Bootstrap的aria-label和aria-labelledby应用
Jan 04 Javascript
Vue.2.0.5实现Class 与 Style 绑定的实例
Jun 20 Javascript
Node.js微信 access_token ( jsapi_ticket ) 存取与刷新的示例
Sep 30 Javascript
vue基于mint-ui的城市选择3级联动的示例
Oct 25 Javascript
angular4中引入echarts的方法示例
Jan 29 Javascript
vue移动端使用canvas签名的实现
Jan 15 Javascript
JS实现无限轮播无倒退效果
Sep 21 Javascript
vue响应式原理与双向数据的深入解析
Jun 04 Vue.js
js学习总结之DOM2兼容处理重复问题的解决方法
Jul 27 #Javascript
angular中实现li或者某个元素点击变色的两种方法
Jul 27 #Javascript
js学习总结之DOM2兼容处理顺序问题的解决方法
Jul 27 #Javascript
AngularJS点击添加样式、点击变色设置的实例代码
Jul 27 #Javascript
vue中计算属性(computed)、methods和watched之间的区别
Jul 27 #Javascript
angular2+node.js express打包部署的实战
Jul 27 #Javascript
利用Ionic2 + angular4实现一个地区选择组件
Jul 27 #Javascript
You might like
php将远程图片保存到本地服务器的实现代码
2015/08/03 PHP
php脚本守护进程原理与实现方法详解
2017/07/20 PHP
PHP token验证生成原理实例分析
2019/06/05 PHP
laravel清除视图缓存的代码
2019/10/23 PHP
优秀js开源框架-jQuery使用手册(1)
2007/03/10 Javascript
编写跨浏览器的javascript代码必备[js多浏览器兼容写法]
2008/10/29 Javascript
javascript eval函数深入认识
2009/02/21 Javascript
鼠标焦点离开文本框时验证的js代码
2013/07/19 Javascript
js实现同一页面多个运动效果的方法
2015/04/10 Javascript
angularJS与bootstrap结合实现动态加载弹出提示内容
2015/10/16 Javascript
Jquery和Js获得元素标签名称的方法总结
2016/10/08 Javascript
easyui-edatagrid.js实现回车键结束编辑功能的实例
2017/04/12 Javascript
jQuery实现的回车触发按钮事件功能示例
2018/03/25 jQuery
vue2.0实现音乐/视频播放进度条组件
2018/06/06 Javascript
Vue文件配置全局变量的实例
2018/09/06 Javascript
微信小程序结合mock.js实现后台模拟及调试
2019/03/28 Javascript
详解vue中使用protobuf踩坑记
2019/05/07 Javascript
vue打包静态资源后显示空白及static文件路径报错的解决
2020/09/02 Javascript
[01:00:49]DOTA2-DPC中国联赛 正赛 Ehome vs iG BO3 第二场 1月31日
2021/03/11 DOTA
python获取元素在数组中索引号的方法
2015/07/15 Python
python使用fcntl模块实现程序加锁功能示例
2017/06/23 Python
Python 创建空的list,以及append用法讲解
2018/05/04 Python
详解python校验SQL脚本命名规则
2019/03/22 Python
详解PyTorch手写数字识别(MNIST数据集)
2019/08/16 Python
Python如何计算语句执行时间
2019/11/22 Python
pytorch 指定gpu训练与多gpu并行训练示例
2019/12/31 Python
Python猴子补丁Monkey Patch用法实例解析
2020/03/23 Python
django使用JWT保存用户登录信息
2020/04/22 Python
Python 通过正则表达式快速获取电影的下载地址
2020/08/17 Python
Python如何急速下载第三方库详解
2020/11/02 Python
集团公司党的群众路线教育实践活动工作总结
2014/03/03 职场文书
房地产营销活动策划方案
2014/09/15 职场文书
2015元旦文艺汇演主持稿(开场白+结束语)
2014/12/14 职场文书
2015年市场部工作总结
2015/04/30 职场文书
《秋天的图画》教学反思
2016/02/19 职场文书
SpringBoot中使用Redis作为全局锁示例过程
2022/03/24 Java/Android