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>
    

      

     

  • 相关阅读:
    Dungeon Master(BFS)
    Shuffle'm Up(串)
    分解素因子
    Snowflake Snow Snowflakes(查找)
    求素数(素数筛选+打表)
    A simple problem(并查集判环)
    Eqs(枚举+ hash)
    Squares(枚举+set 查找)
    从控制台输入10个人的年龄放入数组,将十个人的年龄求总和
    数组
  • 原文地址:https://www.cnblogs.com/yedushusheng/p/5524245.html
Copyright © 2011-2022 走看看