Bootstrap + AngularJS 实现简单的数据过滤字符查找功能
具体代码如下所示：
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 实现简单的数据过滤字符查找，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
相关推荐
-
angularjs封装bootstrap时间插件datetimepicker
背景:angular与jquery类库的协作 第三方类库中,不得不提的是大名鼎鼎的jquery,现在基本上已经是国内web开发的必修工具了.它灵活的dom操作,让很多web开发人员欲罢不能.再加上已经很成熟的jquery UI 库和大量jquery 插件,几乎是一个取之不尽用之不竭的宝库.然而,它是否能与angularjs结合呢? 很多angularjs原教旨主义者对此持否定态度.他们认为,既然已经使用了angularjs做web应用框架,那就必须避免其他类库的干扰,做纯净的MvvM模式应用.任
-
利用Angularjs和Bootstrap前端开发案例实战
我们将利用Angularjs 和 Bootstrap,开发一个前端应用实例,通过这一次简单的项目实战,引领大家进入AngularJS前端开发的殿堂,并向大家介绍一下几个知识点: 1.MVC 基础,通过项目实例,让大家初步体会MVC设计模式的应用. 2.构建我们第一个AngularJS应用,通过一个实际用例的开发,大家可以对前端开发获得一定的感性认识. 3.初步了解AngularJS三个最重要的组成部件,他们分别是Model, View, 和Controller. 4.初步了解Angula
-
BootStrap+Angularjs+NgDialog实现模式对话框
本篇文章主要介绍了"angularjs+bootstrap+ngDialog实现模式对话框",对于Javascript教程感兴趣的同学可以参考一下: 在完成一个后台管理系统时,需要用表显示注册用户的信息.但是用户地址太长了,不好显示.所以想做一个模式对话框,点击详细地址按钮时,弹出对话框,显示地址. 效果如下图: 通过查阅资料,选择使用ngDialog来实现,ngDialog是一个用于Angular.js应用的模式对话框和弹出窗口.ngDialog非常小(?2K),拥有简约的API,通
-
angularJS与bootstrap结合实现动态加载弹出提示内容
angularjs是由Google团队开发的一款非常优秀web前端框架.在当前如此多的web框架下,angularjs能脱颖而出,从架构设计上就高人一等,双向数据绑定,依赖注入,指令,MVC,模板.Angular.js创新地把后台技术融入前端开发,扫去jQuery一度的光芒.用angularjs就像写后台代码,更规范,更结构化,更可控. 1.bootstrp的弹出提示 bootstrap已经帮我们封装了非常好用的弹出提示Popover. http://v3.bootcss.com/javascr
-
利用Angularjs和bootstrap实现购物车功能
先来看看效果图: 购物车 一.代码 如果看了这个效果有兴趣想知道怎么做出来的话,那就继续往下看吧.话不多少,直接上代码. html代码: <!DOCTYPE html> <html lang="en" ng-app="cart"> <head> <meta charset="UTF-8"> <title>购物车</title> <link rel="style
-
Bootstrap + AngularJS 实现简单的数据过滤字符查找功能
具体代码如下所示: find.html <!DOCTYPE html> <html ng-app="find"> <head> <title>字符查找</title> <meta charset="utf-8"/> <script src="../Script/angular.min.js" type="text/javascript">&l
-
JS+CSS实现模仿浏览器网页字符查找功能的方法
本文实例讲述了JS+CSS实现模仿浏览器网页字符查找功能的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <title>JS+CSS模仿的网页字符查找功能</title> <style type=text/css> BODY { FONT-SIZE: 12px; LETTER-SPACING: 1pt; LINE-HEIGHT: 22px; MARGIN-LEFT: 5pt; MARGIN-TOP
-
php 参数过滤、数据过滤详解
下面通过一段代码给大家介绍php参数过滤 class mysafe{ public $logname; public $isshwomsg; function __construct(){ set_error_handler('MyError',E_ALL); //----- } function MyError($errno, $errstr, $errfile, $errline){ echo "<b>Error number:</b> [$errno],error
-
在AngularJS框架中处理数据建模的方式解析
我们知道,AngularJS并没有自带立等可用的数据建模方案.而是以相当抽象的方式,让我们在controller中使用JSON数据作为模型.但是随着时间的推移和项目的成长,我意识到这种建模的方式不再能满足我们项目的需求.在这篇文章中我会介绍在我的AngularJS应用中处理数据建模的方式. 为Controller定义模型 让我们从一个简单的例子开始.我想要显示一个书本(book)的页面.下面是控制器(Controller): BookController app.controller('Book
-
indexedDB bootstrap angularjs之 MVC DOMO (应用示例)
1.indexedDB(Model) -- 前端浏览器对象型数据库,一般我们后台用的数据库都是关系型数据库.那么indexeddb有什么特点呢: 首先,从字义上它是索引型数据库,从实际使用中可以体现为,它需要为表创建索引才可以根据某个字段来获取数据,而在关系型数据库中,这明显是不需要的. 其次,我不需要行列数据的转化,我只需要通过类似于数组的处理方式: 复制代码 代码如下: objectStore.push(data); 有点像是把一个json对象塞入数据库,是不是很暴力? 2.bootstra
-
基于AngularJS的简单使用详解
Angular Js 的初步认识和使用 一: 1.模块化 定义模块和控制器 ng-app="myapp" controller="myctrl" 指定模型 ng-model="" 获取的属性值: ng-bind="属性名"或者{{属性名}} 2.初始化模块(在Script中进行) var myapp1 =angular.module("myapp",[]); 3.定义模块的控制器,并依赖注入, $scope
-
浅析BootStrap Treeview的简单使用
bootstrap-treeview.js1是一款强大的树菜单插件,本文给大家介绍bootstrap treeview的简单使用. 废话不多说,直接上干干货. 1.bootstrap-treeview Github网址: https://github.com/jonmiles/bootstrap-treeview 2.使用要求: <!-- 样式表 --> <link href="~/Content/bootstrap.css" rel="stylesheet
-
Bootstrap Tree View简单而优雅的树结构组件实例解析
A simple and elegant solution to displaying hierarchical tree structures (i.e. a Tree View) while leveraging the best that Twitter Bootstrap has to offer. 这是Bootstrap Tree View在git上的简介. 注意simple.elegant,简单而优雅,我喜欢这两个词. 那么今天的实例是通过Bootstrap Tree View来制作
-
MYSQL必知必会读书笔记第七章之数据过滤
mysql简介 MySQL是一种开放源代码的关系型数据库管理系统(RDBMS),MySQL数据库系统使用最常用的数据库管理语言--结构化查询语言(SQL)进行数据库管理. 计算次序: where 可以包含任意数目的and和or,允许两者结合以进行复杂和高级的过滤.但是SQL在操作or之前会优先的处理AND操作符.如果想优先的使用or的条件可以使用括号. in:为什么要使用in操作符?其优点具体如下. 1.在使用长的合法选项清单时,in操作符的语法更清楚直观 2.在使用IN时,计算的次序更容易管理
-
AngularJS select加载数据选中默认值的方法
问题描述: 在我们开发项目过程中,避免不了会用到select下拉框,那么在angular中如何使用select呢? 解决方案: 可以用ng-options来动态加载option,然后在用ng-model来匹配.代码如下: //html <select ng-model="role_id1" ng-options="o.name for o in list5"></select> //js $scope.list5 = [{"id&q