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 获得服务器控件值的方法小结
May 11 Javascript
location.href 在IE6中不跳转的解决方法与推荐使用代码
Jul 08 Javascript
jquery全选/全不选/反选另一种实现方法(配合原生js)
Apr 07 Javascript
javascript下拉列表中显示树形菜单的实现方法
Nov 17 Javascript
Bootstrap开发实战之第一次接触Bootstrap
Jun 02 Javascript
Bootstrap基本样式学习笔记之按钮(4)
Dec 07 Javascript
vue一个页面实现音乐播放器的示例
Feb 06 Javascript
iview table高度动态设置方法
Mar 14 Javascript
AngularJS $http post 传递参数数据的方法
Oct 09 Javascript
layui实现tab的添加拒绝重复的方法
Sep 04 Javascript
vue实现计算器功能
Feb 22 Javascript
vue+koa2搭建mock数据环境的详细教程
May 18 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把数据表导出为Excel表的最简单、最快的方法(不用插件)
2014/05/10 PHP
PHP多线程类及用法实例
2014/12/03 PHP
php使用指定编码导出mysql数据到csv文件的方法
2015/03/31 PHP
php array_values 返回数组的所有值详解及实例
2016/11/12 PHP
javascript 防止刷新,后退,关闭
2010/08/07 Javascript
浏览器常用高宽的jquery插件
2011/02/24 Javascript
Ext中下拉列表ComboBox组件store数据格式用法介绍
2013/07/15 Javascript
jQuery实现的Div窗口震动效果实例
2015/08/07 Javascript
jQuery实现的超简单点赞效果实例分析
2015/12/31 Javascript
BootStrap使用popover插件实现鼠标经过显示并保持显示框
2016/06/23 Javascript
easyUI实现(alert)提示框自动关闭的实例代码
2016/11/07 Javascript
vue.js中Vue-router 2.0基础实践教程
2017/05/08 Javascript
简单谈谈关于Angular Cli打包的事
2017/09/05 Javascript
express如何使用session与cookie的方法
2018/01/30 Javascript
使用express搭建一个简单的查询服务器的方法
2018/02/09 Javascript
Angular5中状态管理的实现
2018/09/03 Javascript
小程序封装wx.request请求并创建接口管理文件的实现
2019/04/29 Javascript
vue canvas绘制矩形并解决由clearRec带来的闪屏问题
2019/09/02 Javascript
js生成1到100的随机数最简单的实现方法
2020/02/07 Javascript
JS实现移动端可折叠导航菜单(现代都市风)
2020/07/07 Javascript
node.js爬虫框架node-crawler初体验
2020/10/29 Javascript
使用Python构建Hopfield网络的教程
2015/04/14 Python
python基础教程项目三之万能的XML
2018/04/02 Python
Python/Django后端使用PIL Image生成头像缩略图
2019/04/30 Python
Python多重继承之菱形继承的实例详解
2020/02/12 Python
Python3.6安装卸载、执行命令、执行py文件的方法详解
2020/02/20 Python
Python xlwt模块使用代码实例
2020/06/10 Python
Hotels.com英国:全球领先的酒店住宿提供商
2019/01/24 全球购物
博朗(Braun)俄罗斯官方商店:德国小家电品牌
2019/09/24 全球购物
巴西箱包、背包、钱包和旅行配件购物网站:Inovathi
2019/12/14 全球购物
公务员职务工作的自我评价
2013/11/01 职场文书
开水果连锁店创业计划书
2013/12/29 职场文书
优秀教育工作者事迹材料
2014/12/24 职场文书
护士工作心得体会
2016/01/25 职场文书
七年级思品教学反思
2016/02/20 职场文书
为什么 Nginx 比 Apache 更牛逼
2021/03/31 Servers