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 相关文章推荐
Webkit的跨域安全问题说明
Sep 13 Javascript
探讨js中的双感叹号判断
Nov 11 Javascript
Jquery原生态实现表格header头随滚动条滚动而滚动
Mar 18 Javascript
js判断浏览器版本以及浏览器内核的方法
Jan 20 Javascript
easyui window refresh 刷新两次的解决方法(推荐)
May 18 Javascript
封装的dialog插件 基于bootstrap模态对话框的简单扩展
Aug 10 Javascript
EasyUI在Panel上动态添加LinkButton按钮
Aug 11 Javascript
vue的mixins属性详解
Mar 14 Javascript
Vue进度条progressbar组件功能
Apr 17 Javascript
脚手架vue-cli工程webpack的基本用法详解
Sep 29 Javascript
vue.draggable实现表格拖拽排序效果
Dec 01 Javascript
JavaScript私有变量实例详解
Jan 24 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的开发框架的现状和展望
2007/03/16 PHP
《PHP编程最快明白》第七讲:php图片验证码与缩略图
2010/11/01 PHP
PHP mcrypt可逆加密算法分析
2011/07/19 PHP
无法在发生错误时创建会话,请检查 PHP 或网站服务器日志,并正确配置 PHP 安装(win+linux)
2012/05/05 PHP
Codeigniter注册登录代码示例
2014/06/12 PHP
PHP基于php_imagick_st-Q8.dll实现JPG合成GIF图片的方法
2014/07/11 PHP
一个简洁实用的PHP缓存类完整实例
2014/07/26 PHP
阿里云Win2016安装Apache和PHP环境图文教程
2018/03/11 PHP
从JavaScript的函数重名看其初始化方式
2007/03/08 Javascript
jquery Mobile入门—多页面切换示例学习
2013/01/08 Javascript
select多选 multiple的使用示例
2014/06/16 Javascript
jQuery解析XML文件同时动态增加js文件的方法
2015/06/01 Javascript
如何利用Promises编写更优雅的JavaScript代码
2016/05/17 Javascript
bootstrap table单元格新增行并编辑
2017/05/19 Javascript
深入理解jquery的$.extend()、$.fn和$.fn.extend()
2017/07/08 jQuery
原生JS封装_new函数实现new关键字的功能
2018/08/12 Javascript
JS实现的input选择图片本地预览功能示例
2018/08/29 Javascript
Vue项目History模式404问题解决方法
2018/10/31 Javascript
Vue.js实现可排序的表格组件功能示例
2019/02/19 Javascript
使用Phantomjs和Node完成网页的截屏快照的方法
2019/07/16 Javascript
详解Vue中CSS样式穿透问题
2019/09/12 Javascript
详解Python中的Cookie模块使用
2015/07/06 Python
在 Python 应用中使用 MongoDB的方法
2017/01/05 Python
django admin添加数据自动记录user到表中的实现方法
2018/01/05 Python
python3中os.path模块下常用的用法总结【推荐】
2018/09/16 Python
python创建ArcGIS shape文件的实现
2019/12/06 Python
pytorch下大型数据集(大型图片)的导入方式
2020/01/08 Python
pytorch __init__、forward与__call__的用法小结
2021/02/27 Python
CSS3线性渐变简单实现以及该属性在浏览器中的不同
2012/12/12 HTML / CSS
Html5 Canvas实现图片标记、缩放、移动和保存历史状态功能 (附转换公式)
2020/03/18 HTML / CSS
白俄罗斯女装和针织品网上商店:Presli.by
2019/10/13 全球购物
党在我心中演讲稿
2014/09/02 职场文书
财务人员岗位职责
2015/02/03 职场文书
杨善洲观后感
2015/06/04 职场文书
郭明义电影观后感
2015/06/08 职场文书
详解vue身份认证管理和租户管理
2021/05/25 Vue.js