angular入门--filter搜索

首先,列表绑定忽略

先上代码

<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即可,即双向绑定

时间: 2024-09-30 09:32:33

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

Angular入门

Angular入门 这个系列一共会涉及两个JavaScript框架的讲解,一个是Express用做后端,一个是Angular用于前端.和Express一样,Angular分离内容,处理视图.数据和逻辑.和MVC模式很相似,但其实Angular定义是MVW框架,W代表(what ever works for you).意味着它可以是控制器或者视图模型,或者服务,就看你怎么定义的.这一节会介绍基本的Angular知识:然后改造我们之前做的页面:并且调用之前的定义的api来获取数据. Angular的

Angular入门笔记

AngularJS(下面简称其为ng)是Google开源的一款JavaScript MVC框架,弥补了HTML在构建应用方面的不足,其通过使用指令(directives)结构来扩展HTML词汇,使开发者可以使用HTML来声明动态内容,从而使得Web开发和测试工作变得更加容易. 一.历史 AngularJS最初由Misko Hevery和Adam Abrons于2009年开发,后来成为了Google公司的项目. 当前最新版是:1.2.0-beta.10 当前最新稳定版是:1.2.16 二.授权 A

angular入门-写过滤器

angular内置了很多的过滤器,但是有时候还是不能满足需求,好的是angular提供接口让你自己去定义自己的filter 1.定义一个模块 2.在模块的接触上顶一个过滤去 3.过去器就是返回一个函数,函数有一个入口参数就是你需要过滤的内容 这个demo中包含上一个定义的服务的代码 <!doctype html> <html ng-app="myApp"> <head> <script src="angular.js">

angular自定义filter

angular自定义filter angular除了几个自带的常用的filter,还可以自定义filter,以满足不同的需求,简单研究了一下自定义filter,记录一下. 有如下场景,后台返回的数据中,status可能是英文字符串,如果在html中使用if进行挨个判断,则显得有些啰嗦,这样我们就可以使用自定义的filter实现 javasc代码: var myapp = angular.module('demoApp', []); myapp.controller('filterControll

angular入门-如何写一个服务

服务的好处暂且不讨论,先写, 1.定义模块 2.利用工厂方法写服务 3.注入到controller 1. 1 <!doctype html> 2 <html ng-app="myApp"> 3 <head> 4 <script src="angular.js"></script> 5 <style type="text/css"> 6 .btn{ 7 width: 60px;

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

在 Angular 中,我们不应该试图直接修改 DOM 的内容,当需要更新 DOM 内容的时候,应该修改的其实是我们的数据模型,也就是 $scope 中的数据,Angular 会帮助我们将修改之后的数据展示在页面中. 但是,在有些情况下,比如我们有一个搜索框,希望将搜索的关键字在正文中高亮出来,这时候就会感觉比较吃力了,filter 可以帮助我们处理这种情况. 实际上,很多时候,我们的数据是不能直接输出到 DOM 中的,典型的比如日期,或者货币等等,通常需要将我们内部的数据格式化之后,再输出到页

Angular入门篇高速开发导航网

简单介绍 AngularJS 是一个为动态WEB应用设计的结构框架,提供给大家一种新的开发应用方式.这样的方式能够让你扩展HTML的语法.以弥补在构建动态WEB应用时静态文本的不足.从而在web应用程序中使用HTML声明动态内容. AngularJS有五个主要核心特性.例如以下介绍: 双向数据绑定 -- 实现了把model与view全然绑定在一起,model变化,view也变化,反之亦然. 模板 -- 在AngularJS中,模板相当于HTML文件被浏览器解析到DOM中,AngularJS遍历这

Angular入门篇快速开发导航网

简介 AngularJS 是一个为动态WEB应用设计的结构框架,提供给大家一种新的开发应用方式,这种方式可以让你扩展HTML的语法,以弥补在构建动态WEB应用时静态文本的不足,从而在web应用程序中使用HTML声明动态内容. AngularJS有五个主要核心特性,如下介绍: 双向数据绑定 -- 实现了把model与view完全绑定在一起,model变化,view也变化,反之亦然. 模板 -- 在AngularJS中,模板相当于HTML文件被浏览器解析到DOM中,AngularJS遍历这些DOM,

Nodejs之MEAN栈开发(五)-- Angular入门与页面改造

这个系列一共会涉及两个JavaScript框架的讲解,一个是Express用做后端,一个是Angular用于前端.和Express一样,Angular分离内容,处理视图.数据和逻辑.和MVC模式很相似,但其实Angular定义是MVW框架,W代表(what ever works for you).意味着它可以是控制器或者视图模型,或者服务,就看你怎么定义的.这一节会介绍基本的Angular知识:然后改造我们之前做的页面:并且调用之前的定义的api来获取数据. Angular的数据绑定是指视图的改