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

  • 相关阅读:
    ios风场
    ios avplayer 视频播放器
    iOS 微信支付
    ios 支付宝
    IOS 归档
    ios 友盟统计
    iOS OC部分 NSString
    ios 程序员
    Ios 一个很好用的图片选择器
    mac系统U盘装机 一个被系统坑过的路人
  • 原文地址:https://www.cnblogs.com/old-street-hehe/p/6728061.html
Copyright © 2020-2023  润新知