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

  • 相关阅读:
    [转]maven插件的开发
    开发建议
    [转]利用maven的surefire插件实现单元测试与集成测试
    sonar-maven-plugin错误2
    20145218张晓涵_网络欺诈技术防范
    20145218张晓涵_信息搜集与漏洞扫描
    20145218张晓涵_Exp5 MSF基础应用
    20145218张晓涵 PC平台逆向破解_advanced
    20145218张晓涵 恶意代码分析
    20145218 免杀原理与实践
  • 原文地址:https://www.cnblogs.com/old-street-hehe/p/6728061.html
Copyright © 2020-2023  润新知