首页 > 代码库 > AngularJs 表达式

AngularJs 表达式

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>

AngularJs 表达式与Javascript表达式

类似于javascript表达式,AngularJs表达式可以包含字母,操作符,变量。

与Javascript 表达式不同,AngularJs表达式可以写在HTML中。

与Javascript 表达式不同,AngularJs表达式不支持条件判断,循环,异常。

与Javascript 表达式不同,AngularJs表达式支持过滤器。

AngularJs 表达式