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. BZOJ 4521 手机号码

    SB数位dp. 我的貌似要特判9999999999的情况. #include<iostream> #include<cstdio> #include<cstring> ...

  2. ECLIPSE/JAVAWEB （二）三大框架之Hibernate框架 持续更新中...

    (一)发展历史 在Struts框架中使用jdbc连接来读写数据库,我们最常见的就是打开数据库连接.使用复杂的sql语句进行读写.关闭连接,获得的数据又需要转换或封装后往外传,这是一个非常繁琐的过程. ...

  3. 深入理解JavaScript系列：为什么03-0.2不等于0.1

    五一宅家看书,所以接着更新一篇文章. 今天讲一下为什么03-0.2不等于0.1这个问题. 有点标题党的味道,在JavaScript中,当你试着对小数进行加减运算时,有时候会发现某个结果并非我们所想的那 ...

  4. java并发编程学习笔记（一）初识并发原子性

    1.并发的意义 现在是一个多核的时代,并发的存在意义就是为了能够充分利用多核计算机的优势,提高程序的运行效率: 2.并发的风险 竞争-----多个线程对内存数据数据进行读写操作时,对数据处理结果的一个 ...

  5. WindowsService部署和问题的解决方法

    1.Windows Service项目生成:[服务名称].exe 编译后,把bin\debug下所有都拷贝到生产环境的一个地址下:[服务exe所在文件地址] 2.部署:做一个ServiceInstal ...

  6. 【已解决】关于SQL2008 “不允许保存更改。您所做的更改要求删除并重新创建以下表。您对无法重新创建的标进行了更改或者启用了‘阻止保存要求重新创建表的更改’” 解决方案

    近日在使用SQL Server 2008的过程中,修改已创建完成的表结构时,却一直提示弹出如下提示: 不允许保存更改.您所做的更改要求删除并重新创建以下表.您对无法重新创建的标进行了更改或者启用了“阻 ...

  7. Lua小技巧

    来公司以后,业务逻辑都用lua写.写了好长时间了,到最近才觉得有点掌握了Lua的灵活.最近用Lua写了个类似集合一样的东西,如果两次向集合里放入同一个元素,就会报错,方便检查配置.代码如下: -- k ...

  8. Matlab从一系列图片导出AVI视频，导出GIF动图

    平台:Win7,Matlab 2014a 从一系列图片导出AVI视频的M代码如下: clear all; % 清除变量 % 官方示例,命令窗口输入“doc VideoWriter” writerObj ...

  9. IIS 7 php 7.0 部署WE MALL

    想在本地环境部署We Mall,本地环境为Win 7+IIS 7+php 7.0 在php manager调用phpinfo ouput()时老是报错: " HTTP 错误 500.19 - ...

  10. RubyGems 镜像

    Gem Source 命令:   gem sources -a http://gems.ruby-china.org   gem sources -l