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. 关于C语言编译器Dev c++的调试

    大家应该都安装了C语言的编译软件,不过我个人认为Dev C++比VC6.0好用,所以只是说明DEv C++软件的调试方法 如果英文不好的,可以先汉化,再调试. 汉化:工具-----环境选项------ ...

  2. jQuery的使用

    一.基本简介 1.下载:http://jquery.com提供了最新的jQuery框架下载.通常只需下载最小的jQuery包(Minified)即可. ( 目前最新的版本jquery-1.3.2.mi ...

  3. htop基本使用

    一.什么是htop? top是所有类unix系统的必备工具,能直观方便的查看到系统负载.内存及进程等信息. 而htop具有top工具的全部功能且还新增了一些额外的功能和使用体验改进.与top相比,其具 ...

  4. 程序员的成长与规划 | 送签名书啦 | StuQ专访foruok

    StuQ(InfoQ的朋友)对我做了一次专访,下面是原文. 福利:送一本签名版<你好哇,程序员>,参与方式在文末.

  5. 黑马----JAVA字符串

    黑马程序员:Java培训.Android培训.iOS培训..Net培训 Stirng.StringBuffer和StringBuilder都实现了字符序列接口CharSequence,都是final类 ...

  6. Python 基礎 - 字符轉編碼操作

    回顧字符編碼的前世今生 ASCII 只能儲英文或特殊字符,只占一個字節,一個字節8bit,不能儲中文,所以才出現Unicode Unicode 不管是中文或英文,都是占二個字節,一個字節8bit UT ...

  7. RNN 入门学习资料整理

    建议按序阅读 1. RNN的一些简单概念介绍 A guide to recurrent neural networks and backpropagation Deep learning:四十九(RN ...

  8. C#循环语句练习2

    1.羽毛球拍15元,球3元,水2元,有200元,每一种至少买一件,问有几种买法? 2.洗发水15元,牙刷5元,香皂2元,有150元,每一种至少买一件,问有几种买法? 3.用100元钱买100只鸡,公鸡 ...

  9. Python2.7.12开发环境构建(自动补全)

    一.安装readline-devel包 Python的编译安装依赖于这个包 yum -y install readline-devel 二.安装Python2.7.12 Python官方网站(到此处下 ...

  10. xloader

    [1],先看一下整个系统的结构(软件是灵魂,硬件是驱体,再强大的灵魂力若没有躯体终将是游魂野鬼,再强壮的驱体若没有灵魂终将是植物人) 结构 作用 备注 硬件 一切软件的载体   xloader 引导u ...