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 + Ajax调用webService实例代码(asp.net)
Aug 27 Javascript
鼠标拖动实现DIV排序示例代码
Oct 14 Javascript
JavaScript学习笔记之JS对象
Jan 22 Javascript
JS实现让网页背景图片斜向移动的方法
Feb 25 Javascript
JavaScript实现仿新浪微博大厅和腾讯微博首页滚动特效源码
Sep 15 Javascript
深入学习JavaScript对象
Oct 13 Javascript
Jquery插件easyUi实现表单验证示例
Dec 15 Javascript
学习使用bootstrap基本控件(table、form、button)
Apr 12 Javascript
基于Vue2的独立构建与运行时构建的差别(详解)
Dec 06 Javascript
jQuery实现菜单的显示和隐藏功能示例
Jul 24 jQuery
Angular动画实现的2种方式以及添加购物车动画实例代码
Aug 09 Javascript
react-router4按需加载(踩坑填坑)
Jan 06 Javascript
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实现的Timer页面运行时间监测类
2014/09/24 PHP
php上传文件并存储到mysql数据库的方法
2015/03/16 PHP
PHP数组中头部和尾部添加元素的方法(array_unshift,array_push)
2017/04/10 PHP
onbeforeunload与onunload事件异同点总结
2013/06/24 Javascript
轻松学习jQuery插件EasyUI EasyUI创建树形菜单
2015/11/30 Javascript
JS中的数组方法笔记整理
2016/07/26 Javascript
关于JS中二维数组的声明方法
2016/09/24 Javascript
微信小程序 教程之小程序配置
2016/10/17 Javascript
关于Sequelize连接查询时inlude中model和association的区别详解
2017/02/27 Javascript
angular.js和vue.js中实现函数去抖示例(debounce)
2018/01/18 Javascript
ES6 Object属性新的写法实例小结
2019/06/25 Javascript
bootstrap+spring boot实现面包屑导航功能(前端代码)
2019/10/09 Javascript
JS实现音量控制拖动
2020/01/15 Javascript
Vue表单提交点击事件只允许点击一次的实例
2020/10/23 Javascript
JavaScript实现京东快递单号查询
2020/11/30 Javascript
[01:43]倾听DOTA2英雄之声 魅惑魔女国服配音鉴赏
2013/06/06 DOTA
[03:14]DOTA2斧王 英雄基础教程
2013/11/26 DOTA
[01:03:47]VP vs NewBee Supermajor 胜者组 BO3 第一场 6.5
2018/06/06 DOTA
python实现连接mongodb的方法
2015/05/08 Python
Python的Scrapy爬虫框架简单学习笔记
2016/01/20 Python
python使用插值法画出平滑曲线
2018/12/15 Python
Python3实现发送邮件和发送短信验证码功能
2020/01/07 Python
Python 添加文件注释和函数注释操作
2020/08/09 Python
canvas画图被放大且模糊的解决方法
2020/08/11 HTML / CSS
日本热销NO.1胶原蛋白冻:Aishitoto爱希特多
2019/06/20 全球购物
豪华复古化妆:Besame Cosmetics
2019/09/06 全球购物
盖尔斯工厂店:GUESS Factory
2020/01/21 全球购物
女大学生个人求职信
2013/12/09 职场文书
园林技术个人的自我评价
2014/01/08 职场文书
歌颂祖国的演讲稿
2014/05/04 职场文书
标准离婚协议书(2014版)
2014/10/05 职场文书
教师个人查摆剖析材料
2014/10/14 职场文书
小学生通知书评语
2014/12/31 职场文书
新生开学寄语大全
2015/05/28 职场文书
电力培训学习心得体会
2016/01/11 职场文书
《鲁滨逊漂流记》之六读后感(4篇)
2019/09/29 职场文书