首先，列表绑定忽略

先上代码

<html ng-app="app1">

  <head>

  <meta charset='utf-8' />

    <meta name="generator"

    content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />

    <title>angularJs filter</title>

	<script src="angular.min.js"></script>

  </head>

  <body ng-controller='ctrl1' >

	<input type='text' ng-model='keywords' />  <input type='button' ng-click='search()'  value="Search" />

	<ol>

		<li ng-repeat="item in data | filter:{name:searchText}">

			<ul>

			<li>name:<span ng-bind="item.name"></span></li>

			<li> age:<span ng-bind="item.age"></span></li>

			<li> sex:<span ng-bind="item.sex"></span></li>

			<li> height:<span ng-bind="item.height"></span></li>

			<li> description:<span ng-bind="item.description"></span></li>

			</ul>

		</li>

	</ol>

	<script>

	var dataList=[{

		name:'mary',

		age:24,

		sex:'female',

		height:'170cm',

		description:'Hi,everyBody,Nice to meet you'

	},

	{

		name:'Jackey',

		age:28,

		sex:'male',

		height:'187cm',

		description:'Hi,all,Nice to meet you'

	},

	{

		name:'Leon',

		age:27,

		sex:'male',

		height:'180cm',

		description:'Hi,everyBody,I\'m from china'

	},

	{

		name:'Andy',

		age:42,

		sex:'male',

		height:'173cm',

		description:'Hi,everyBody,I\'m from Hong kong'

	}]

	var app=angular.module('app1',[]);

	app.controller('ctrl1',['$scope',function($scope){

		$scope.name="China";

		$scope.data=dataList;

		$scope.sort='age';

		$scope.desc=true;

		$scope.keywords='';

		$scope.searchText='';

		$scope.search=function(){

			$scope.searchText=$scope.keywords;

		}

	}])

	</script>

  </body>

</html>

实现的效果就是输入关键字，会根据name进行搜索，如下所示

如果是对data进行全局搜索，只需要把这句话改成item in data | filter:{name:searchText} -----》item in data | filter:searchText

如果想做成不使用按钮，直接搜索框的值改变时即可实现搜索，那个直接将item in data | filter:{name:searchText}改成item in data | filter:keywords即可，即双向绑定

angular入门--filter搜索的更多相关文章

  1. angular入门

    angular入门 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset=&q ...

  2. Angular入门笔记

    AngularJS(下面简称其为ng)是Google开源的一款JavaScript MVC框架,弥补了HTML在构建应用方面的不足,其通过使用指令(directives)结构来扩展HTML词汇,使开发 ...

  3. angular的filter

    angular的filter filter两种用法 1.在模板中使用filter {{expression|filter}}//基本用法 {{expression|filter1|filter2|fi ...

  4. angular入门一之环境安装及项目创建

    angular入门一之环境安装及项目创建 1.安装node.js 下载,安装,在终端测试安装是否成功:node -v(查看nodejs版本) npm -v(查看npm版本) 下载地址:https:// ...

  5. 在 Angular 中实现搜索关键字高亮

    在 Angular 中,我们不应该试图直接修改 DOM 的内容,当需要更新 DOM 内容的时候,应该修改的其实是我们的数据模型,也就是 $scope 中的数据,Angular 会帮助我们将修改之后的数 ...

  6. Angular入门篇高速开发导航网

    简单介绍 AngularJS 是一个为动态WEB应用设计的结构框架,提供给大家一种新的开发应用方式.这样的方式能够让你扩展HTML的语法.以弥补在构建动态WEB应用时静态文本的不足.从而在web应用程 ...

  7. Nodejs之MEAN栈开发（五）---- Angular入门与页面改造

    这个系列一共会涉及两个JavaScript框架的讲解,一个是Express用做后端,一个是Angular用于前端.和Express一样,Angular分离内容,处理视图.数据和逻辑.和MVC模式很相似 ...

  8. angular的$filter服务

    首先,介绍下$filter服务: 1.$filter是用来进行数据格式化的专用服务: 2.AngularJS内置了currency.date.filter.json.limitTo.lowercase ...

  9. angular入门系列教程4

    主题: 本篇主要目的就是继续完善home页下的index子页面的内容,处理一个列表,进行增删改查过滤等操作. 效果图: 细节: 主要的更改有两个,一个是修改模板index.html,还有就是增加控制器 ...

随机推荐

  1. Java实现第九届蓝桥杯倍数问题

    倍数问题 题目描述 [题目描述] 众所周知,小葱同学擅长计算,尤其擅长计算一个数是否是另外一个数的倍数.但小葱只擅长两个数的情况,当有很多个数之后就会比较苦恼.现在小葱给了你 n 个数,希望你从这 n ...

  2. java实现第七届蓝桥杯阶乘位数

    阶乘位数 阶乘位数 9的阶乘等于:362880 它的二进制表示为:1011000100110000000 这个数字共有19位. 请你计算,9999 的阶乘的二进制表示一共有多少位? 注意:需要提交的是 ...

  3. JVM性能优化 (一) 初识JVM

    一.我们为什么要对JVM做优化 在本地开发环境中我们很少会遇到需要对JVM进行优化的需求,但是到了生产环境,我们可能会有下面的需求: 运行的应用"卡住了",日志不输出,程序没有反应 ...

  4. Java编程技术之浅析JVM内存

    JVM JVM->Java Virtual Machine:Java虚拟机,是一种用于计算设备的规范,它是一个虚构出来的计算机,是通过在实际的计算机上仿真模拟各种计算机功能来实现的. 基本认知: ...

  5. MySQL进阶篇(02)：索引体系划分，B-Tree结构说明

    本文源码:GitHub·点这里 || GitEE·点这里 一.索引简介 1.基本概念 首先要明确索引是什么:索引是一种数据结构,数据结构是计算机存储.组织数据的方式,是指相互之间存在一种或多种特定关系 ...

  6. ROS 机器人技术 - 解决 ROS_INFO 不能正确输出 string 的问题！

    一.输出「??」 项目调试一个节点,打印 ROS 信息时发现设置的节点名称都是问号: ROS_INFO("[%s]: camera_extrinsic_mat", kNodeNam ...

  7. Tomcat/ WebSphere/WebLogic的作用和特点

    作用: Tomcat:目前应用非常广泛的免费web服务器,支持部分j2ee. WebSphere:是IBM集成软件平台.可做web服务器,WebSphere提供了可靠.灵活和健壮的集成软件. Webl ...

  8. Python基础——爬虫以及简单的数据分析

    目标:使用Python编写爬虫,获取链家青岛站的房产信息,然后对爬取的房产信息进行分析. 环境:win10+python3.8+pycharm Python库: import requests imp ...

  9. （十三）exec-maven-plugin配置及使用

    原文链接:https://www.cnblogs.com/lianshan/p/7358966.html 背景: 如果你想在项maven生命周期内,运行一段java代码,或者一段独立的程序,或者说我们 ...

  10. 团队进行Alpha冲刺--冲刺总结

    这个作业属于哪个课程 软件工程 (福州大学至诚学院 - 计算机工程系) 这个作业要求在哪里 团队作业第五次--Alpha冲刺 这个作业的目标 团队进行Alpha冲刺--冲刺总结 作业正文 如下 其他参 ...