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 相关文章推荐
本地对象Array的原型扩展实现代码
Dec 04 Javascript
Js sort排序使用方法
Oct 17 Javascript
jQuery获取选中内容及设置元素属性的方法
Jul 09 Javascript
JavaScript时间转换处理函数
Apr 14 Javascript
JavaScript必知必会(六) delete in instanceof
Jun 08 Javascript
jQuery插件ajaxFileUpload异步上传文件
Oct 19 Javascript
浅谈$_FILES数组为空的原因
Feb 16 Javascript
node.js调用Chrome浏览器打开链接地址的方法
May 17 Javascript
浅谈webpack 自动刷新与解析
Apr 09 Javascript
Vue中android4.4不兼容问题的解决方法
Sep 04 Javascript
更强大的vue ssr实现预取数据的方式
Jul 19 Javascript
支付宝小程序实现省市区三级联动
Jun 21 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
windows下的WAMP环境搭建图文教程(推荐)
2017/07/27 PHP
一个无限级XML绑定跨框架菜单(For IE)
2007/01/27 Javascript
Js组件的一些写法
2010/09/10 Javascript
从数据结构分析看:用for each...in 比 for...in 要快些
2013/04/17 Javascript
JS判断不能为空实例代码
2013/11/26 Javascript
jquery实现的导航固定效果
2014/04/28 Javascript
利用a标签自动解析URL分析网址实例
2014/10/20 Javascript
JS实现页面超时后自动跳转到登陆页面
2015/01/19 Javascript
jQuery实现tab标签自动切换的方法
2015/02/28 Javascript
Jquery日期选择datepicker插件用法实例分析
2015/06/08 Javascript
jQuery自定义滚动条完整实例
2016/01/08 Javascript
jquery判断input值不为空的方法
2016/06/05 Javascript
Vue.js 2.0 移动端拍照压缩图片上传预览功能
2017/03/06 Javascript
解决easyui日期时间框ie的兼容的问题
2018/03/01 Javascript
Vue2.0生命周期的理解
2018/08/20 Javascript
更改BootStrap popover的默认样式及popover简单用法
2018/09/13 Javascript
vue 音乐App QQ音乐搜索列表最新接口跨域设置方法
2018/09/25 Javascript
微信小程序实现天气预报功能(附源码)
2020/12/10 Javascript
[10:14]2018DOTA2国际邀请赛寻真——paiN Gaming不仅为自己而战
2018/08/14 DOTA
python创建只读属性对象的方法(ReadOnlyObject)
2013/02/10 Python
python del()函数用法
2013/03/24 Python
python 创建一个空dataframe 然后添加行数据的实例
2018/06/07 Python
将tensorflow的ckpt模型存储为npy的实例
2018/07/09 Python
pybind11在Windows下的使用教程
2019/07/04 Python
Python的log日志功能及设置方法
2019/07/11 Python
Django如何实现网站注册用户邮箱验证功能
2019/08/14 Python
Python Opencv提取图片中某种颜色组成的图形的方法
2019/09/19 Python
Python:type、object、class与内置类型实例
2019/12/25 Python
简历中自我评价分享
2013/10/09 职场文书
教师绩效考核方案
2014/01/21 职场文书
团购业务员岗位职责
2014/03/15 职场文书
2015年超市收银员工作总结
2015/04/25 职场文书
2016年国庆节宣传标语
2015/11/25 职场文书
2016元旦晚会主持词开场白和结束语
2015/12/04 职场文书
在js中修改html body的样式
2021/11/11 Javascript
微软Win11什么功能最惊艳? Windows11新功能特性汇总
2021/11/21 数码科技