angular的过滤器

angular有一些自带的过滤器,今天我就来写一下。

首先还是先把导入一个angular插件,再在我们的js中把模块和控制台写上(别忘了在html中写入模块名和在body中写入控制台名,当然控制台名可以视情况而定写在哪)。

因为我们老用数组,所以先写一下截取数组长度的;先在控制台中写一个数组,再在html中用angular的写法写入;

截取数组长度

$scope.arr = [1,2,3,4,5,6,7];  //在js的控制台中创建数组

{{arr | limitTo:数组长度}};

排序

$scope.brr = [‘b‘, ‘l‘, ‘a‘, ‘c‘, ‘e‘, ‘h‘];//在js的控制台中创建数组

{{brr | orderBy}};  //在html中将js中控制台中的数组引出并排序;如果是英文就按字母排,汉字按首字母.数字就按大小;

添加符号

$scope.a = 50; //在js的控制台中创建数值

{{a | currency:"¥"}}  //如果有需要钱币符号或特殊符号我们可以这么写

大写和小写

$scope.str = "dawdaJKNKawdBBJw"; //在js的控制台中写一个带有大写和小写字母的字符串

{{str | uppercase}}  //大写

{{str | lowercase}}  //小写

千分位

$scope.nub = 116516116;  //在js控制台中写一个长的数值

{{nub | number}}  //讲数值用千分位的方式分开

时间的过滤器

$scope.shijian = new Date().getTime();//在js控制台中获取一下时间戳

{{shijian | date:‘yyyy-MM-dd hh:mm:ss EEEE‘}} //yyyy年份 MM月份 dd日期 hh小时 mm分钟 ss秒 EEEE星期但是是英文的

搜索过滤器

$scope.crr = [{name: ‘土豆‘,price: 5,nbm: 0},

      {name: ‘茄子‘,price: 6,nbm: 0},

       {name: ‘黄瓜‘,price: 8,nbm: 0}];//在js控制台中创建一个数据来用来搜索

<input type="text" ng-model="xx"/>

<ul>

  <li ng-repeat="i in crr | filter:xx">{{i.name}}</li>

</ul>

在html中先创建一个文本框来获取一下要搜索的数据,再将数据从数据中导出后在依照搜索的内容显示和隐藏

如果你想自己来定义一个过滤器也是可以的

我先写一个让首字符大写的

$scope.str1=‘welcome to china‘;

app.filter(‘变量名‘,function(){

  return function(input){

  return input.replace(/\w+/g,function(s){

  return s.charAt(0).toUpperCase()+s.substring(1);

})

{{str1 | 变量名}}  //通过变量名来寻找到自己定义的过滤器

时间: 2024-10-25 14:32:22

angular的过滤器的相关文章

angular JS 过滤器

过滤器: 过滤器用来格式化需要展示给用户的数据. AngularJS有很多实用的内置过滤器,也可以自己创建过滤器. 可以使用过滤器:  前面是数据, 后面是格式 {{ name | uppercase }} 可以通过$filter来调用过滤器, app.controller('DemoController', ['$scope', '$filter',function($scope, $filter) { $scope.name = $filter('lowercase')('Ari'); //

Angular - - filter 过滤器

Filter Ng里的过滤器. currency:把一个数字格式化成货币模式(如$1,234.56).当没有提供任何货币符号时,默认使用当前区域的符号. 使用: HTML:{{ currency_expression | currency:symbol:fractionSize}} JS:$filter(“currency”)(amount,symbol,fractionSize); amount:数值,过滤的值. symbol:字符串,要显示的货币符号或标识符. fractionSize:数值

Angular 自定义过滤器

<!DOCTYPE html><html ng-app="myApp"><head lang="en"> <meta charset="UTF-8"> <script src="js/angular.js"></script> <title></title></head><body><div ng-co

Angular——自定义过滤器

基本介绍 除了使用AngularJS内建过滤器外,还可以根业务需要自定义过滤器,通过模块对象实例提供的filter方法自定义过滤器. 基本使用 (1)input是将绑定的数据以参数的形式传入 (2)input后面的参数也就是:后面的参数,指导在视图时候该如何传递参数 (3)filter方法的回调函数将函数作为返回值,最后这个函数会在视图中进行调用,并且返回值 App.filter('demo', function () { return function (input, arg) { retur

angular自定义过滤器

<html ng-app="Demo"> <head> <meta charset="utf-8"> <title>Order</title> </head> <body> <script src="js/angular.min.js"></script> <script> var app = angular.module('D

Angular js 过滤器 笔记(转自菜鸟教程)

1.uppercase,lowercase 大小写转换 {{ "lower cap string" | uppercase }} // 结果:LOWER CAP STRING {{ "TANK is GOOD" | lowercase }} // 结果:tank is good 2.date 格式化 {{1490161945000 | date:"yyyy-MM-dd HH:mm:ss"}} // 2017-03-22 13:52:25 3.nu

自定义jinja2 过滤器

今天,我们要讲的是自定义jinja2 过滤器这个知识点,因为官方文档对此一代而过,讲得不够清楚,所以我们专门拿出来讲一下. 例子 例子写了两个自定义过滤器,一个是转换字典到字符串的过滤器,一个是返回当前参数的类型的过滤器. 源代码: https://github.com/lewis617/jinja2-filter filter是个函数 filter是个函数,跟angular的过滤器几乎一模一样.参数就是管道(pipe)前面那个变量.比如   123|myfilter,123就是myFilter

[Angular Tutorial] 3-Filtering Repeaters

在上一步中,我们花了很大功夫来布局应用的基础,所以我们现在做点简单点的吧!我们将会添加一个全文本搜索框(没错,这很简单). ·我们的应用现在会有一个搜索框,注意页面中手机列表的改变取决于用户在搜索框键入的内容. 最重要的变化列举如下,当然,你也可以点击这里在GitHub上查看全部的不同. 控制器 我们对控制器不做任何修改. 模板 app/index.html: <div class="container-fluid"> <div class="row&quo

angular学习笔记(一)

入门实例: 一个购物车产品清单,可以自行改变数量,总价自动计算的小例子: 代码如下: <!DOCTYPE html> <html ng-app> <head> <title>1.1实例:购物车</title> <meta charset="utf-8"> <script src="../angular.js"></script> <script src="