AngularJs 表达式

Posted 2020-09-11 老街_hehe

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表达式支持过滤器。