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. 转的： 重绘ListView 修改标题颜色

    1.owerDraw 设置为true 2.实现事件 DrawColumnHeader DrawItem DrawSubItem private void listView1_DrawColumnHea ...

  2. Cosh.1

    不管  先查壳 是VC++的 拿到OD  看看    经过跟踪 发现一个挺神奇的地方 再随便单步单步看看,发现CreateFileA返回的值总是-1 0040137A      83F8 00     ...

  3. How to connect to Linux VM from Windows

  4. IE10、IE11 ASP.Net 网站无法写入Cookie 问题

    在做项目的时候遇上一个奇怪的问题,这个项目是用前端DWZ框架+MVC框架做的,在IE10和IE11上, 用户登录之后,操作界面中的任何操作,都无法操作,抛出异常,经过查找分析发现, 只有在IE10和I ...

  5. downsampling and upsampling【转】

    orig: http://www.eetimes.com/document.asp?doc_id=1275556 downsampling The process of reducing a samp ...

  6. 提升Nginx+PHP-FPM性能技巧

    /etc/php-fpm.d 2.1进程数   php-fpm初始/空闲/最大worker进程数      pm.max_children = 300      pm.start_servers = ...

  7. URL参数为url,获取不到部分参数问题

    url1中的参数含有url2,在页面上获取url时发现url后面跟的参数获取不到,其实是浏览器把url2中&后的参数作为url1的参数来处理了. 如:http://www.ilcng.com/ ...

  8. 第七章：LED将为我闪烁：控制发光二极管

        在之前章节了解到Linux驱动程序可以控制软硬件,可以实现软硬件之间的交互.在这章我们学习LED驱动的实现原理.Linux内核提供了多个与I/O内存交互的函数可以实现控制硬件.    编写LE ...

  9. SQL Server 中存储过程的练习

    建库建表建约束 插入数据 --建库建表建约束和插入测试数据 use bankDB go --1.完成存款,取款业务--存款 create proc usp_takeMoney ),),)=null,@ ...

  10. python 3 学习笔记（二）

    1.python中的数据类型 python使用对象模型来存储数据,每一个数据类型都有一个内置的类,每新建一个数据,实际就是在初始化生成一个对象,即所有数据都是对象对象三个特性 身份:内存地址,可以用i ...