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 相关文章推荐
事件绑定之小测试  onclick &amp;&amp; addEventListener
Jul 31 Javascript
javascript 回到顶部效果的实现代码
Feb 17 Javascript
JavaScript前补零操作实例
Mar 11 Javascript
javascript实现网页中涉及的简易运动(改变宽高、透明度、位置)
Nov 29 Javascript
对jquery的ajax进行二次封装以及ajax缓存代理组件:AjaxCache详解
Apr 11 Javascript
全面解析JavaScript的Backbone.js框架中的Router路由
May 05 Javascript
微信小程序 框架详解及实例应用
Sep 26 Javascript
深入理解Javascript中的观察者模式
Feb 20 Javascript
从零学习node.js之利用express搭建简易论坛(七)
Feb 25 Javascript
vue v-for直接循环数字实例
Nov 07 Javascript
JS实现简易图片自动轮播
Oct 16 Javascript
javascript中导出与导入实现模块化管理教程
Dec 03 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
下载文件的点击数回填
2006/10/09 PHP
PHP中exec函数和shell_exec函数的区别
2014/08/20 PHP
PHP数组与字符串互相转换实例
2020/05/05 PHP
JS使用replace()方法和正则表达式进行字符串的搜索与替换实例
2014/04/10 Javascript
JavaScript实现多个重叠层点击切换效果的方法
2015/04/24 Javascript
Jquery简单分页实现方法
2015/07/24 Javascript
使用impress.js制作幻灯片
2015/09/09 Javascript
loading动画特效小结
2017/01/22 Javascript
JS中call和apply函数用法实例分析
2018/06/20 Javascript
详解Vue取消eslint语法限制
2018/08/04 Javascript
记一次vue-webpack项目优化实践详解
2019/02/17 Javascript
vue+echarts实现可拖动节点的折线图(支持拖动方向和上下限的设置)
2019/04/12 Javascript
jquery制作的移动端购物车效果完整示例
2020/02/24 jQuery
vue 实现基础组件的自动化全局注册
2020/12/25 Vue.js
[56:18]VGJ.S vs Secret 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
在Python的Django框架中使用通用视图的方法
2015/07/21 Python
Python错误: SyntaxError: Non-ASCII character解决办法
2017/06/08 Python
基于Django模板中的数字自增(详解)
2017/09/05 Python
python编写朴素贝叶斯用于文本分类
2017/12/21 Python
python测试mysql写入性能完整实例
2018/01/18 Python
python学习——内置函数、数据结构、标准库的技巧(推荐)
2019/04/18 Python
python 一维二维插值实例
2020/04/22 Python
celery在python爬虫中定时操作实例讲解
2020/11/27 Python
CSS3实现千变万化的文字阴影text-shadow效果设计
2016/04/26 HTML / CSS
HTML5 Canvas 旋转风车绘制
2017/08/18 HTML / CSS
阿联酋网上花店:Ferns N Petals
2018/02/14 全球购物
新西兰优惠网站:Treat Me
2019/07/04 全球购物
小学教研工作制度
2014/01/15 职场文书
医学生就业推荐表自我鉴定
2014/03/26 职场文书
住宿生擅自离校检讨书
2014/09/22 职场文书
副检察长四风问题对照检查材料思想汇报
2014/10/07 职场文书
督导岗位职责
2015/02/04 职场文书
焦裕禄纪念馆观后感
2015/06/09 职场文书
西游降魔篇观后感
2015/06/15 职场文书
百年校庆宣传标语口号
2015/12/26 职场文书
Win11电源已接通但未充电怎么办?Win11电源已接通未充电的解决方法
2022/04/05 数码科技