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 相关文章推荐
JavaScript中常见陷阱小结
Apr 27 Javascript
javascript自执行函数之伪命名空间封装法
Dec 25 Javascript
怎么清空javascript数组
May 11 Javascript
JS使用ajax从xml文件动态获取数据显示的方法
Mar 24 Javascript
Bootstrap零基础入门教程(二)
Jul 18 Javascript
JavaScript实现邮箱地址自动匹配功能代码
Nov 28 Javascript
JavaScript省市级联下拉菜单实例
Feb 14 Javascript
JS实现颜色动态淡化效果
Mar 06 Javascript
从零到一详聊创建Vue工程及遇到的常见问题
Apr 25 Javascript
uni-app使用微信小程序云函数的步骤示例
May 22 Javascript
Vue中keep-alive组件的深入理解
Aug 23 Javascript
WebPack工具运行原理及入门教程
Dec 02 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 FPDF类库应用实现代码
2009/03/20 PHP
PHP 简单数组排序实现代码
2009/08/05 PHP
php获取ip的三个属性区别介绍(HTTP_X_FORWARDED_FOR,HTTP_VIA,REMOTE_ADDR)
2012/09/23 PHP
PHP实现批量修改文件名的方法示例
2019/09/18 PHP
PHP mkdir创建文件夹实现方法解析
2020/11/13 PHP
在Javascript中 声明时用&quot;var&quot;与不用&quot;var&quot;的区别
2013/04/15 Javascript
js获取某月的最后一天日期的简单实例
2013/06/22 Javascript
Javascript页面添加到收藏夹的简单方法
2013/08/07 Javascript
解决window.opener=null;window.close(),只支持IE6不支持IE7,IE8的问题
2014/01/14 Javascript
javascript函数中参数传递问题示例探讨
2014/07/31 Javascript
JS 新增Cookie 取cookie值 删除cookie 举例详解
2014/10/10 Javascript
关于input全选反选恶心的异常情况
2016/07/24 Javascript
AngularJS实现的自定义过滤器简单示例
2019/02/02 Javascript
微信小程序中的列表切换功能实例代码详解
2020/06/09 Javascript
Vue 修改网站图标的方法
2020/12/31 Vue.js
简单谈谈python中的多进程
2016/11/06 Python
分享一下Python数据分析常用的8款工具
2018/04/29 Python
python3 selenium 切换窗口的几种方法小结
2018/05/21 Python
python flask实现分页的示例代码
2018/08/02 Python
python快排算法详解
2019/03/04 Python
Python爬虫使用浏览器cookies:browsercookie过程解析
2019/10/22 Python
Python用类实现扑克牌发牌的示例代码
2020/06/01 Python
Python环境使用OpenCV检测人脸实现教程
2020/10/19 Python
CSS3制作缩略图的详细过程
2016/07/08 HTML / CSS
Too Faced官网:美国知名彩妆品牌
2017/03/07 全球购物
大学生个人推荐信范文
2013/11/25 职场文书
小学班长竞选演讲稿
2014/04/24 职场文书
《山谷中的谜底》教学反思
2014/04/26 职场文书
投资建议书模板
2014/05/12 职场文书
新书发布会策划方案
2014/06/09 职场文书
爱与责任师德演讲稿
2014/08/26 职场文书
幼儿园安全教育月活动总结
2015/05/08 职场文书
夏洛特的网观后感
2015/06/15 职场文书
公司晚会主持词
2019/04/17 职场文书
python 如何用map()函数创建多线程任务
2021/04/07 Python
python如何利用traceback获取详细的异常信息
2021/06/05 Python