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. PHP时区配置

    在PHP安装目录中找到 php.ini-development 复制创建新的副本 找到 :date.timezone = 修改为 date.timezone = PRC 并保存为php.ini PRC ...

  2. vs2010无可用源

    全选CPP文件内容,选择 “编辑”-“高级”-“设置选定内容的格式”,保存,重新编译. 当然这种方法是不能完全解决这个问题的奥,你需要在菜单栏的生成里面找到重新生成解决方案,重新生成解决方案试一下啦, ...

  3. pip自动生成requirements.txt依赖关系清单

    Python项目中经常会带requirements.txt文件,里面是项目所依赖的包的列表,也就是依赖关系清单,这个清单也可以使用pip命令自动生成. pip命令: 1 pip freeze > ...

  4. 向peersim开火！P2P开火！（安装和样例运行）

    根据导师的要求,这次的任务是要模拟一个类似BT网络的P2P网络,并实现一些算法,查了些资料,都说NS2对于P2P网络的模拟和支持都不好,基本没有模板可以用,而且效率很低,只能模拟几万个节点左右,看到挺 ...

  5. codeforces 721C （拓排 + DP）

    题目链接:http://codeforces.com/contest/721/problem/C 题意:从1走到n,问在时间T内最多经过多少个点,按路径顺序输出. 思路:比赛的时候只想到拓排然后就不知 ...

  6. cnblogs开篇留念

    之前看过很多大牛程序员们介绍的一些经验之类的文章,几乎每个人都提到了一点就是平时要写博客,记录一些自己平时学习和工作过程中学习到的一些技术点和心得.之前也用过一些其他的网站博客,上周有同事推荐了一篇文 ...

  7. ftpget 从Windows FTP服务端获取文件

    /********************************************************************************* * ftpget 从Windows ...

  8. Python 基礎 - 文件的操作

    在來我們來玩一下文件操作,這個在未來工作上,也是會很常用到的功能 Python2.7中,可以用file()來打開文件,而在Python3中,一律都是用open(),接下來在當前目錄下,先建立一個空文件 ...

  9. Android驱动开发前的准备（二）

    搭建android开发环境 2.1 Android底层开发需要哪些工具 2.2 安装 JDK 2.3 搭建Android 应用程序开发环境 2.4安装Android NDK开发环境 2.5安装交叉编译 ...

  10. 《C与指针》第十二章练习

    本章例程 //12.3 #include <stdio.h> #include <stdlib.h> typedef struct NODE{ struct NODE *lin ...