zoukankan      html  css  js  c++  java
  • Binding 指令实现双向数据绑定

    代码

    #方法一:ng-bind的使用
    #方法二:{{}}插值表达式的使用
    <!doctype html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>AngualrJS进阶</title> 
    <link rel="stylesheet" type="text/css" href="css/foundation.css">
    </head>
    <body style="padding:10px;" ng-app="">
    <div>
    <input type="text" ng-model="uname">
    <!--这里是模拟后台获取的数据,这里以input为例,需要规定类型ype以及ng-model属性-->
    <div>{{"用户名:"+uname}}</div>
    <!--这里的双向数据绑定符号{{}}不能省略,否则不会实现数据绑定功能;
    在实际应用中使用的是http获取数据,然后输出-->
    <br>
    <h1 ng-block="">{{uname}}</h1>
    <!--当AngularJS扫描到ng-block的时候,等待后面uname加载完移除class,然后显示h1标签-->
    <br>
    <div ng-bind="'用户名:'+uname"></div>
    <!--这里ng-bind后面仍然可以使用{{}}进行数据绑定,但这里采用更为方便的双引号,里面字符输出用单引号-->
    <div class="{{uname}}">{{uname}}</div>
    <!--设置显示的class,这里如果输入CSS中具备的元素,如button等会显示Button按钮-->
    </div>
    </body>
    <script type="text/javascript" src="js/angular.js"></script>
    </html>
    

      

     

  • 相关阅读:
    docker参数--restart=always的作用
    docker参数expose使用
    Linux主机添加路由和端口转发
    docker自动开启端口转发功能
    【Tips】【UE】总结自己常用的UltraEdit使用技巧
    浅谈I2C总线
    I2C总线简介(很经典)
    ECN
    视频编码未来简史
    爬虫与反爬虫
  • 原文地址:https://www.cnblogs.com/yedushusheng/p/5524245.html
Copyright © 2011-2022 走看看