angularjs-过滤输入filter

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<title></title>

<link rel="stylesheet" href="">

</head>

<body>

<div ng-app="myApp" ng-controller="namesCtrl">

<p><input type="text" ng-model="test"></p>

<ul>

<li ng-repeat="x in names | filter:test | orderBy:‘country‘">

{{(x.name | uppercase) + ‘, ‘ + x.country}}

</li>

</ul>

</div>

</body>

<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>

<script>

var app = angular.module("myApp",[]);

app.controller("namesCtrl",function($scope){

$scope.names = [

{name:‘lili‘,country:‘Norway‘},

{name:‘xiao‘,country:‘Sweden‘},

{name:‘mimin‘,country:‘Denmark‘}

];

});

</script>

</html>

时间: 2024-10-22 05:19:56

angularjs-过滤输入filter的相关文章

AngularJS 过滤与排序详解及实例代码

这篇文章主要介绍了AngularJS 过滤与排序,实现查询过滤以及排序的功能. 通过这篇文章可以了解到 1. angularjs的过滤器 2. ng-repeat的使用方法 3. 控制器的使用 4. 数据的绑定 首先,如果要是先查询过滤,就要使用到AngularJS中的 过滤器filter 了. 直接在表达式的后面使用管道命令符 | ,按照下面的写法就可以达到一个过滤的效果: {{ persons | filter:query }} 通过使用filter实现过滤操作,query是查询过滤时输入的

angularjs培训之filter

在angularjs中,filter提供了格式化数据或者过滤数据的功能: 1.请看下面简单的例子 <div ng-controller="phoneListExtendController"> I have {{friends.length}} friends. They are: <input type="search" ng-model="q" placeholder="filter friends..."

AngularJS学习--- 过滤器(filter),格式化要显示的数据 step 9

1.切换目录,启动项目 git checkout step-9 npm start 2.需求: 格式化要显示的数据. 比如要将true-->yes,false-->no,这样相互替换. 3.效果: 4.代码实现: 这里主要是使用filter过滤器来进行数据过滤,这里只是在前端进行数据过滤,原始数据是不发生变化的. $filter:Filters are used for formatting data displayed to the user,格式化要显示的数据. 用法: {{ expres

angularjs ngTable -Custom filter template-calendar

jsp页面: <script type="text/ng-template" id="path/to/your/filters/top-Date-One.html"> <input type="text" ng-click="popup1.opened=!popup1.opened" uib-datepicker-popup="{{formats[2]}}" ng-model="

AngularJS学习笔记filter

filter是对数据进行过滤操作,比如按某个字段搜索.格式化数据等等,是一个非常有用的接口.下面就简单介绍下它的用法. AngularJS自带的filter接口,|是filter的分隔符,参数用:分隔: currency,格式化number,货币化,默认是转化成美元  param(number,symbol),返回值将会把数字每3位加一个逗号 <input type="number" ng-model="amount"/> <p>默认美元:{

过滤输入——JS总结

过滤输入--JS总结 1.过滤输入两种模式: 1.1 禁止或屏蔽非数字键的输入,阻止非数字键的默认行为 1.2 验证后取消,你可以先输入非法字符,然后判断后,取消刚才输入的文本 2.实现: 2.1 方法:禁止--默认行为                   [引用封装:封装基础代码] addEvent(window,'load',function () { var fm = document.getElementById('MyForm'); var user = fm.elements['us

文本框脚本 - 过滤输入

过滤输入经常应用的场合是,限定文本框的输入特定数据,或者输入特定格式的数据. 当输入那离不开键盘,当然也不开这三个事件: keydown keypress keyup 先来看看这些事件的顺序: textbox.addEventListener("keyup",function(){ console.log("keyup"); //3 },false); textbox.addEventListener("keydown",function(){

angularJS学习小结——filter

引言 filter过滤器对于我们来说并不陌生,他和我们现实生活中的过滤器的意思差不多,它的作用就是接收一个输 入的值,然后按照某个规则进行处理然后输出最后的结果,例如我们输入一个数字,然后我们需要得到货币形式的数 据,这样我们就可以利用过滤器来实现,angularJS中的过滤器是非常简单的,分为内置和自定义两种,下面小编就 简单的给大家介绍一些. 内置过滤器 ng内置了一些过滤器,它们是:currency(货币).date(日期).filter(子串匹配).json(格式化json对象). li

AngularJS过滤排序思路

本篇主要整理使用AngularJS进行过滤排序的思路. 在controller中,$scope的persons字段存储数组. $scope.persons = [ { "name": "aa", "email": "aaemail", "birthdate": "2015-03-23T18:00:37-07:00", "phonenumber": "aaph

AngularJS学习之filter过滤器的用法

系统的学习angularjs,发现angularjs的有些思想根php的模块smarty很像,例如数据绑定,filter.如果对smarty比较熟悉的话,学习angularjs会比较容易一点.这篇简单说一下angularjs的filter功能,angularjs的filter功能可分为二种,一种是内置的过滤器,一种是自定义的. 一,内置的过滤器 1,uppercase,lowercase大小转换 {{ "lower cap string" | uppercase }}   //结果:L