AngularJs 表达式

最新推荐文章于 2025-09-05 11:22:47 发布

weixin_33857230

最新推荐文章于 2025-09-05 11:22:47 发布

阅读量70

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/old-street-hehe/p/6728061.html

本文详细介绍了AngularJS表达式的使用方法及其与JavaScript表达式的区别。包括如何将数据绑定到HTML中，展示数值、字符串、对象及数组等类型的表达式示例，并对比了使用表达式与ng-bind指令的效果。

AngularJs 表达式

AngularJs 表达式写在双大括号内：{{expression}}

AngularJs 表达式把数据绑定到HTML，这与ng-bind有异曲同工之妙。

AngularJs 将在表达式书写的位置输出数据。

AngularJs 表达式很想javascript表达式：它们可以包含文字、运算符和变量。

eg:{{5 + 5}}或{{firstName + " " + lastName}}

    <div ng-app = "angu" ng-controller="myCtro">
        <input type="text" ng-model = "firstName">
        <input type="text" ng-model = "lastName">
        <span ng-bind = "name"></span>
        <p>表达式：{{firstName + "5" + lastName}}</p>
    </div>
    <script>
        var app = angular.module("angu",[]);
        app.controller("myCtro",function($scope){

        })
    </script>

AngularJs 数字：

    <div ng-app = "angu" ng-controller="myCtro" ng-init="quantity=2;price=5">
        <p>总价：{{quantity * price}}</p>
        <!--总价：10-->
    </div>
    <script>
        var app = angular.module("angu",[]);
        app.controller("myCtro",function($scope){

        })
    </script>

使用ng-bind的相同实例：

    <div ng-app = "angu" ng-controller="myCtro" ng-init="quantity=2;price=5">
        <p> 
           总价：<span ng-bind="quantity * price"></span>
        </p>
        <!--总价：10-->
    </div>
    <script>
        var app = angular.module("angu",[]);
        app.controller("myCtro",function($scope){

        })
    </script>

AngularJs 字符串：

    <div ng-app = "angu" ng-controller="myCtro" ng-init="firstName='John';lastName='Don'">
        <p> 
           姓名：{{firstName +" "+ lastName}}
        </p>
    </div>
    <script>
        var app = angular.module("angu",[]);
        app.controller("myCtro",function($scope){

        })
    </script>

使用ng-bind的相同实例：

　　<div ng-app = "angu" ng-controller="myCtro" ng-init="firstName='John';lastName='Don'">
        <p> 
           姓名：<span ng-bind="firstName +' '+ lastName"></span>
        </p>
    </div>
    <script>
        var app = angular.module("angu",[]);
        app.controller("myCtro",function($scope){

        })
    </script>

AngularJs 对象：

    <div ng-app = "angu" ng-controller="myCtro" ng-init="person={firstName:'John',lastName:'Don'}">
        <p> 
           姓名：{{person.firstName +' '+ person.lastName}}
        </p>
    </div>
    <script>
        var app = angular.module("angu",[]);
        app.controller("myCtro",function($scope){

        })
    </script>

使用ng-bind的相同实例：

    <div ng-app = "angu" ng-controller="myCtro" ng-init="person={firstName:'John',lastName:'Don'}">
        <p> 
           姓名：<span ng-bind="person.firstName +' '+ person.lastName"></span>
        </p>
    </div>
    <script>
        var app = angular.module("angu",[]);
        app.controller("myCtro",function($scope){

        })
    </script>

AngularJs 数组：

<div ng-app = "angu" ng-controller="myCtro" ng-init="person=['sing','dance','draw']">
        <p> 
            爱好：{{person[2]}}
        </p>
    </div>
    <script>
        var app = angular.module("angu",[]);
        app.controller("myCtro",function($scope){

        })
    </script>

使用ng-bind的相同实例：

    <div ng-app = "angu" ng-controller="myCtro" ng-init="person=person=['sing','dance','draw']">
        <p> 
           爱好：<span ng-bind="person[2]"></span>
        </p>
    </div>
    <script>
        var app = angular.module("angu",[]);
        app.controller("myCtro",function($scope){

        })
    </script>