AngularJS的表达式是放在{{}}里面，用{{ }}符号将一个变量绑定到$scope上。

angularJS中的表达式有如下特点：

1.只能在其所属作用域内部

所有的表达式都在其所属的作用域内部执行，并有访问本地$scope的权限。

2.允许未定义

在html中可以使用未在angularJS定义的变量，不会抛出异常

3.不能使用流控制

不能使用任何流控制包括条件语句，如if/else

4.过滤器

可以接收过滤器和过滤器链，使用 | 符号连接过滤器

请看小例子：

<!doctype html>

<html ng-app>

<head>

<meta charset="utf-8" />

<script src="https://code.angularjs.org/1.2.16/angular.min.js"></script>

</head>

<body>

    <div ng-controller="Controller">

        <button ng-click="change()">change</button>

        <br>

        显示：{{ person }}

        <br>

        未显示{{undefine}}

        <br>

        过滤显示：{{person | uppercase}}

    </div>

    <script type="text/javascript">

        function Controller($scope){

            $scope.person = 'monkey';

            $scope.change = function(){

                $scope.person = 'cat';

            }

        }

    </script>

</body>

</html>

自定义过滤器：

html文件：

<!doctype html>

<html ng-app="myApp">

<head>

<meta charset="utf-8" />

<script src="https://code.angularjs.org/1.2.16/angular.min.js"></script>

</head>

<body>

    <div ng-controller="Controller">

        <button ng-click="change()">change</button>

        <br>

        显示：{{ person }}

        <br>

        未显示{{undefine}}

        <br>

        过滤显示（大写）：{{person | uppercase}}

        <br>

        过滤显示（首字母大写）：{{person | capitalize}}

        <br>

        过滤显示（首字母大写）：{{person | lowercase | capitalize}}

    </div>

    <script type="text/javascript" src="./app.js"></script>

</body>

</html>

app.js文件：

var app = angular.module("myApp",[]);

app.controller('Controller',function($scope){

    $scope.person = 'monkey';

            $scope.change = function(){

                $scope.person = 'cat';

    }

})

app.filter('capitalize',function(){

    return function(input){        //input是我们传入的字符串

        if (input) {

            return input[0].toUpperCase() + input.slice(1);

        }

    }

})

AngularJS---表达式的更多相关文章

  1. AngularJS表达式

    1. AngularJS使用表达式把数据绑定到HTML. 2. AngularJS表达式的特点: 表达式写在双大括号内:{{表达式}}. 表达式把数据绑定到HTML,这与ng-bind指令有异曲同工之 ...

  2. AngularJS开发指南5：AngularJS表达式详解

    AngularJS表达式类似Javascript的代码片段,通常在数据绑定中用到,写在双大括号中,如:{{表达式}}.表达式是用$parse方法来处理的. 下面是一些合法的AngularJS表达式 1 ...

  3. AngularJS学习之旅—AngularJS 表达式(二)

    1.AngularJS 表达式 AngularJS 表达式写在双大括号内:{{ expression }}. AngularJS 表达式把数据绑定到 HTML,这与 ng-bind 指令有异曲同工之妙 ...

  4. AngularJS 表达式 对象和数组

    AngularJS 使用 表达式 把数据绑定到 HTML. AngularJS 表达式 AngularJS 表达式写在双大括号内:{{ expression }}. AngularJS 表达式把数据绑 ...

  5. angularJS表达式详解！

    angularJS的表达式很像Javascript里的表达式:它可以包含文字,运算符和变量: angularJS 表达式: - 数字:{{100+100}} - 字符串:{{‘hello’+'angu ...

  6. 第一个AngularJS表达式实例

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  7. 【04】AngularJS 表达式

    AngularJS 表达式 AngularJS 使用 表达式 把数据绑定到 HTML. AngularJS 表达式 AngularJS 表达式写在双大括号内:{{ expression }}. Ang ...

  8. 32.AngularJS 表达式

    转自:https://www.cnblogs.com/best/tag/Angular/ AngularJS 表达式写在双大括号内:{{ expression }}. AngularJS 表达式把数据 ...

  9. angularjs表达式中的HTML内容，如何不转义，直接表现为html元素

    在模板中直接: 在ionic中直接使用: <p class="contentwen" ng-bind-html="detial.content">& ...

  10. angularJS表达式和指令

    主要是描述angularJS如何扩展html的:(模型后面会涉及) 例子1:通过指令来扩展html <body ng-app="myapp">  <!--  ng ...

随机推荐

  1. jquery判断div是否隐藏实例

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. 硬件初始化，nand flash固化操作，系统启动简单流程

    2015.3.27星期五 晴 链接脚本定义代码的排放顺序 硬件系统初始化:一:arm核初始化:(里面有指令)初始化ARM核的时候需要看arm核的手册指令:1.异常向量(最起码有个复位异常,初始化模式- ...

  3. keyFile 巩固练习

    系统 : Windows xp 程序 : noodles-crackme2 程序下载地址 :http://pan.baidu.com/s/1mhJ4Ems 要求 : 编写KeyFile 使用工具 : ...

  4. WeView 里引用的H5中的文字 到行末尾 文字被切割

    这个情况 在iPhone6以上没问题  以下有问题  具体情况是 我用以下代码计算内容的高度 NSString *injectionJSString = @"var script = doc ...

  5. Data Big Bang

    在过去的五十多年中,我们可以较为直观地看到IT行业正以蓬勃发展之势渗入到我们生活的方方面面.虽经历过几轮新兴和重叠的技术浪潮,但每一波浪潮都伴随着新兴技术的革新.IT供应商主导着互联网的走向,网络秩序 ...

  6. iOS—Mask属性的使用

    Mask属性介绍 Mask平时用的最多的是masksToBounds 吧. 其实除此以外Mask使用场景很多,看完之后你会发现好真是好用的不要不要的... 先来了解下Mask属性到底是什么? Mask ...

  7. Linux覆盖率一点研究：获取覆盖率数据

     首先,当然哥不介意你鄙视我在网上找的资料研究! 白盒覆盖率是啥东东这个问题大家自己查百度啦!我也不太懂,就知道它不是个东西,就这样开始吧(MT一般是先摸四蹄呢还是先黑金币呢?这是个问题)! 首先:l ...

  8. CSS前5课总结

    CSS<精通CSS.DIV网页样式与布局>视频前5课总结: 地对地导弹 第一课: 使用CSS控制页面: 1,行内样式 <p style="color:#0000FF; fo ...

  9. Swift----函数 、 闭包 、 枚举 、 类和结构体 、 属性

    1 数组排序 1.1 问题 本案例实现一个整型数组排序的函数,数组排序的规则由传递的规则函数决定. 1.2 方案 首先定义一个整型数组排序函数sortInts,该函数有一个整型数组类型的参数,该参数必 ...

  10. javascript设计模式之观察者模式

    观察者模式又称发布/订阅模式   publish/subscribe 它是一种一对多的关系,让多个观察者对象同时监听某一主题对象,这个主题对象的状态发生变化时就会通知所有的观察者对象,使得他们能够自动 ...