AngularJS变量及过滤器Filter用法分析


Posted in Javascript onNovember 22, 2016

本文实例讲述了AngularJS变量及过滤器Filter用法。分享给大家供大家参考,具体如下:

1. 关于部分变量的操作

设置变量:

ng-init="hour=14" //设置hour变量在DOM中 使用data-ng-init 更好些
$scope.hour = 14; //设置hour变量在js中

使用变量:

(1) 如果是在DOM 相关的 ng-*** 属性里 直接写变量名

如:

<p ng-show="hour > 13">I am visible.</p>

(2) 如果是在控制器HTML 中但是不在 ng属性里

使用{{变量名}}

如:

{{hour}}

(3) 当然第三种就是上面的 在js中使用

加上对象名 $scope.

$scope.hour

(4) 在表单控件中 ng-model中的变量 可以直接

同时在 html 中 使用 {{变量名}}

<p>Name: <input type="text" ng-model="name"></p>
<p>You wrote: {{ name }}</p>

还可以通过 ng-bind 属性进行变量绑定

<p>Name: <input type="text" ng-model="name"></p>
<p ng-bind="name"></p>

(5) 可以直接在ng的属性 或变量中使用表达式

会自动帮你计算 需要符合js语法

ng-show="true?false:true"
{{5+6}}
<div ng-app="" ng-init="points=[1,15,19,2,40]">
  <p>The third result is <span ng-bind="points[2]"></span></p>
</div>

2. js中的变量循环

<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
 <ul>
  <li ng-repeat="x in names">
   {{ x }}
  </li>
 </ul>
</div>

3.变量的过滤 filter

Filter         Description
currency    以金融格式格式化数字
filter          选择从一个数组项中过滤留下子集。
lowercase   小写
orderBy     通过表达式将数组排序
uppercase   大写

如:

<p>The name is {{ lastName | uppercase }}</p>

当然多个函数封装可以使用 |

<p>The name is {{ lastName | uppercase | lowercase }}</p>
//排序函数的使用
<ul>
 <li ng-repeat="x in names | orderBy:'country'">
  {{ x.name + ', ' + x.country }}
 </li>
</ul>
//通过输入内容自动过滤显示结果
<div ng-app="" 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>

names | filter:test | orderBy:'country'
就是将names数组中的项 按照 test表单值进行 筛选
然后以 names中的子元素 country 进行排序

自定义过滤器:

<!DOCTYPE html>
<html ng-app="HelloApp">
<head>
<title></title>
</head>
<body ng-controller="HelloCtrl">
 <form>
   <input type="text" ng-model="name"/>
 </form>
 <div>{{name|titlecase}}</div>
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
 <script type="text/javascript">
  // 编写过滤器模块
  angular.module('CustomFilterModule', [])
      .filter( 'titlecase', function() {
    return function( input ) {
      return input.replace(/\w\S*/g, function(txt){return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();});
  }
  });
  // 实际展示模块
  // 引入依赖的过滤器模块 CustomFilterModule
  angular.module('HelloApp', [ 'CustomFilterModule'])
    .controller('HelloCtrl', ['$scope', function($scope){
    $scope.name = '';
  }])
</script>
</body>
</html>

希望本文所述对大家AngularJS程序设计有所帮助。

Javascript 相关文章推荐
jQuery 表单验证扩展代码(二)
Oct 20 Javascript
jquery实现checkbox全选全不选的简单实例
Dec 31 Javascript
jQuery中:input选择器用法实例
Jan 03 Javascript
jQuery+jsp下拉框联动获取本地数据的方法(附源码)
Dec 03 Javascript
jQuery使用方法
Feb 04 Javascript
微信小程序新增的拖动组件movable-view使用教程
May 20 Javascript
JS实现json的序列化和反序列化功能示例
Jun 13 Javascript
js实现图片放大展示效果
Aug 30 Javascript
vue移动UI框架滑动加载数据的方法
Mar 12 Javascript
使用Nuxt.js改造已有项目的方法
Aug 07 Javascript
Vue 3.0 前瞻Vue Function API新特性体验
Aug 12 Javascript
在vue中使用Base64转码的案例
Aug 07 Javascript
jQuery中$.grep() 过滤函数 数组过滤
Nov 22 #Javascript
JavaScript实现图片轮播组件代码示例
Nov 22 #Javascript
浅析JavaScriptSerializer类的序列化与反序列化
Nov 22 #Javascript
JS如何设置iOS中微信浏览器的title
Nov 22 #Javascript
原生JS查找元素的方法(推荐)
Nov 22 #Javascript
自己封装的一个原生JS拖动方法(推荐)
Nov 22 #Javascript
SelecT下拉框选中和取值的解决方法
Nov 22 #Javascript
You might like
汉字转化为拼音(php版)
2006/10/09 PHP
基于PHP文件操作的详解
2013/06/05 PHP
php中最简单的字符串匹配算法
2014/12/16 PHP
PHP使用PDO连接ACCESS数据库
2015/03/05 PHP
PHP的伪随机数与真随机数详解
2015/05/27 PHP
PHP基于SPL实现的迭代器模式示例
2018/04/22 PHP
多浏览器兼容的获取元素和鼠标的位置的js代码
2009/12/15 Javascript
jQuery 文本框得失焦点的简单实例
2014/02/19 Javascript
Javascript WebSocket使用实例介绍(简明入门教程)
2014/04/16 Javascript
extjs 分页使用jsp传递数据示例
2014/07/29 Javascript
js QQ客服悬浮效果实现代码
2014/12/12 Javascript
node.js中的fs.futimesSync方法使用说明
2014/12/17 Javascript
javascript实现获取浏览器版本、操作系统类型
2015/01/29 Javascript
JavaScript实现SHA-1加密算法的方法
2015/03/11 Javascript
jQuery实现简单的列表式导航菜单效果代码
2015/08/31 Javascript
Jquery技巧(必须掌握)
2016/03/16 Javascript
vue.js动态数据绑定学习笔记
2017/05/19 Javascript
webpack项目使用eslint建立代码规范实现
2019/05/16 Javascript
layui lay-verify form表单自定义验证规则详解
2019/09/18 Javascript
微信小程序实现可拖动悬浮图标(包括按钮角标的实现)
2020/12/29 Javascript
python根据出生日期获得年龄的方法
2015/03/31 Python
python2.7 mayavi 安装图文教程(推荐)
2017/06/22 Python
python安装numpy&amp;安装matplotlib&amp; scipy的教程
2017/11/02 Python
Numpy数组转置的两种实现方法
2018/04/17 Python
Django项目中包含多个应用时对url的配置方法
2018/05/30 Python
Python删除n行后的其他行方法
2019/01/28 Python
python 成功引入包但无法正常调用的解决
2020/03/09 Python
HTML5使用ApplicationCache接口实现离线缓存技术解决离线难题
2012/12/13 HTML / CSS
前端水印的简单实现代码示例
2020/12/02 HTML / CSS
有机婴儿毛毯和衣服:Monica + Andy
2020/03/01 全球购物
C#中有没有运算符重载?能否使用指针?
2014/05/05 面试题
销售业务员岗位职责
2014/01/29 职场文书
贪污受贿检讨书范文
2014/11/19 职场文书
辞职信格式模板
2015/02/27 职场文书
2015年全国保险公众宣传日活动方案
2015/05/06 职场文书
python随机打印成绩排名表
2021/06/23 Python