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与Ajax常用代码实现对比
Oct 03 Javascript
Javascript数组的排序 sort()方法和reverse()方法
Jun 04 Javascript
javascript字母大小写转换的4个函数详解
May 09 Javascript
get(0).tagName获得作用标签示例代码
Oct 08 Javascript
js数组的操作指南
Dec 28 Javascript
javascript省市区三级联动下拉框菜单实例演示
Nov 29 Javascript
详解JavaScript实现设计模式中的适配器模式的方法
May 18 Javascript
基于javascript实现的快速排序
Dec 02 Javascript
JavaScript实现简单的四则运算计算器完整实例
Apr 28 Javascript
详解Vue中watch的高级用法
May 02 Javascript
Vue.js子组件向父组件通信的方法实例代码详解
Dec 10 Javascript
关于对TypeScript泛型参数的默认值理解
Jul 15 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
substr()函数中文版
2006/10/09 PHP
mysql4.1以上版本连接时出现Client does not support authentication protocol问题解决办法
2007/03/15 PHP
PHP用mb_string函数库处理与windows相关中文字符及Win环境下开启PHP Mb_String方法
2015/11/11 PHP
利用PHPExcel读取Excel的数据和导出数据到Excel
2017/05/12 PHP
php反序列化长度变化尾部字符串逃逸(0CTF-2016-piapiapia)
2020/02/15 PHP
jQuery1.6 使用方法二
2011/11/23 Javascript
jquery索引在使用中的一些困惑
2013/10/24 Javascript
JavaScript获取按钮所在form表单id的方法
2015/04/02 Javascript
JavaScript实现表格快速变色效果代码
2015/08/19 Javascript
JavaScript ES5标准中新增的Array方法
2016/06/28 Javascript
javascript实现数据双向绑定的三种方式小结
2017/03/09 Javascript
jQuery中table数据的值拷贝和拆分
2017/03/19 Javascript
JS正则表达式验证中文字符
2017/05/08 Javascript
微信小程序获取手机网络状态的方法【附源码下载】
2017/12/08 Javascript
微信小程使用swiper组件实现图片轮播切换显示功能【附源码下载】
2017/12/12 Javascript
Angular2使用vscode断点调试ts文件的方法
2017/12/13 Javascript
详解vue2.0+axios+mock+axios-mock+adapter实现登陆
2018/07/19 Javascript
Nodejs中获取当前函数被调用的行数及文件名详解
2018/12/12 NodeJs
Vue实现todo应用的示例
2021/02/20 Vue.js
Python2/3中urllib库的一些常见用法
2017/12/19 Python
Python使用matplotlib简单绘图示例
2018/02/01 Python
简单谈谈Python的pycurl模块
2018/04/07 Python
Python 中 function(#) (X)格式 和 (#)在Python3.*中的注意事项
2018/11/30 Python
pyqt5使用按钮进行界面的跳转方法
2019/06/19 Python
python issubclass 和 isinstance函数
2019/07/25 Python
python3 tkinter实现添加图片和文本
2019/11/26 Python
Python列表解析操作实例总结
2020/02/26 Python
tensorflow指定CPU与GPU运算的方法实现
2020/04/21 Python
Django REST 异常处理详解
2020/07/15 Python
使用纯HTML5编写一款网页上的时钟的代码分享
2015/11/16 HTML / CSS
TripAdvisor德国:全球领先的旅游网站
2017/12/07 全球购物
意大利买卖二手奢侈品网站:LAMPOO
2020/06/03 全球购物
乐观大学生的自我评价
2014/01/10 职场文书
详解python的内存分配机制
2021/05/10 Python
MySQL不使用order by实现排名的三种思路总结
2021/06/02 MySQL
Windows下redis下载、redis安装及使用教程
2021/06/02 Redis