zoukankan      html  css  js  c++  java
  • AngularJs轻松入门(二)数据绑定

    数据绑定是AngularJs中非常重要的特性,我们看一下下面的例子:

    <!DOCTYPE html>
    <html ng-app>
    <head lang="en">
        <meta charset="UTF-8">
        <script type="text/javascript" src="angular-1.3.0.14/angular.js"></script>
        <title>tutorial02</title>
    </head>
    <body>
    <div>
        用户名:<input type="text" ng-model="name" placeholder="用户名"/>
        密码:<input type="password" ng-model="pword" placeholder="密码"/>
        <p>您输入的用户名:{{name}}</p>
        <p>您输入的密码:{{pword}}</p>
    </div>
    
    </body>
    </html>

    这个例子非常简单,我们先在浏览器中运行一下看看效果。

    这里写图片描述

    当我们在文本框中输入信息后,我们输入的信息会动态的回显到页面中。
    在这个例子中我们使用到了AngularJs的另一个内置指令ng-model,它表示我们在模型数据对象($scope)中添加一个名为”name”的属性,并将它和文本框对象进行绑定。这意味着不管我们在文本框中输入什么,都会同步到这个”name”属性中,AngularJs会监听表单对象相关事件,所以回显内容会随着文本框的输入而改变。

    需要注意的是ng-model只能用在表单元素标签中,下一节介绍AngularJs的MVC架构。

  • 相关阅读:
    OD 实验(十三)
    第一个 Windows 界面程序
    C 语言
    C 语言
    OD 实验(十二)
    PowerShell 常用命令
    OD 实验(十一)
    OD 实验(十)
    redis
    memcached缓存系统
  • 原文地址:https://www.cnblogs.com/lanzhi/p/6468914.html
Copyright © 2011-2022 走看看