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 相关文章推荐
在javascript将NodeList作为Array数组处理的方法
Jul 09 Javascript
基于Jquery的标签智能验证实现代码
Dec 27 Javascript
JS实现图片预加载无需等待
Dec 21 Javascript
AngularJS指令与控制器之间的交互功能示例
Dec 14 Javascript
JavaScript中的call和apply的用途以及区别
Jan 11 Javascript
vue router2.0二级路由的简单使用
Jul 05 Javascript
JavaScript 中 JSON.parse 函数 和 JSON.stringify 函数
Dec 05 Javascript
Vue-CLI项目中路由传参的方式详解
Sep 01 Javascript
微信小程序调用wx.getImageInfo遇到的坑解决
May 31 Javascript
vue使用nprogress加载路由进度条的方法
Jun 04 Javascript
Threejs实现滴滴官网首页地球动画功能
Jul 13 Javascript
vue中div禁止点击事件的实现
Apr 02 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
jquery+php+ajax显示上传进度的多图片上传并生成缩略图代码
2014/10/15 PHP
crontab无法执行php的解决方法
2016/01/25 PHP
如何在Mozilla Gecko 用Javascript加载XSL
2007/01/09 Javascript
基于jquery的一个图片hover的插件
2010/04/24 Javascript
css值转换成数值请抛弃parseInt
2011/10/24 Javascript
JS TextArea字符串长度限制代码集合
2012/10/31 Javascript
JS对文本框值的判断示例
2014/03/10 Javascript
Javascript中的delete操作符详细介绍
2014/06/06 Javascript
JavaScript静态类型检查工具FLOW简介
2015/01/06 Javascript
JS+CSS实现模仿浏览器网页字符查找功能的方法
2015/02/26 Javascript
使用nodejs中httpProxy代理时候出现404异常的解决方法
2016/08/15 NodeJs
JSON与JS对象的区别与对比
2017/03/01 Javascript
微信小程序 蓝牙的实现实例代码
2017/06/27 Javascript
vue 2.5.1 源码学习 之Vue.extend 和 data的合并策略
2019/06/04 Javascript
javascript实现的字符串转换成数组操作示例
2019/06/13 Javascript
uniapp实现横向滚动选择日期
2020/10/21 Javascript
vue-cli4.0多环境配置变量与模式详解
2020/12/30 Vue.js
动态实现element ui的el-table某列数据不同样式的示例
2021/01/22 Javascript
[01:06:18]DOTA2-DPC中国联赛 正赛 Phoenix vs Dynasty BO3 第二场 1月26日
2021/03/11 DOTA
Python获取电脑硬件信息及状态的实现方法
2014/08/29 Python
Python简单实现自动删除目录下空文件夹的方法
2017/08/29 Python
python使用正则表达式的search()函数实现指定位置搜索功能
2017/11/10 Python
python使用socket创建tcp服务器和客户端
2018/04/12 Python
python Spyder界面无法打开的解决方法
2018/04/27 Python
python 反向输出字符串的方法
2018/07/16 Python
Empty test suite.(PyCharm程序运行错误的解决方法)
2018/11/30 Python
Python父目录、子目录的相互调用方法
2019/02/16 Python
python定时复制远程文件夹中所有文件
2019/04/30 Python
python匿名函数用法实例分析
2019/08/03 Python
tensorflow之读取jpg图像长和宽实例
2020/06/18 Python
python 利用百度API识别图片文字(多线程版)
2020/12/14 Python
干部对照检查材料范文
2014/08/26 职场文书
公安局副政委班子个人对照检查材料
2014/10/04 职场文书
义诊活动通知
2015/04/24 职场文书
详细介绍Java中的CyclicBarrier
2022/04/13 Java/Android
Golang入门之计时器
2022/05/04 Golang