三种方式：

  • 方式一：<h5>{{msg}}</h5>  此方式在页面刷新的时候会闪现{{}}
  • 方式二：<h5 ng-bind="msg"></h5>
  • 方式三：<h5 ng-clock class="ng-clock">{{msg}}</h5>

示例代码：

<!DOCTYPE html>

<html lang="en" ng-app="myapp">

<head>

    <meta charset="UTF-8">

    <title>AngularJs12-实现数据绑定的三种方式</title>

    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css"/>

</head>

<body>

    <div ng-controller="MyCtrl" style="padding: 60px;">

        <input type="text" class="form-control" ng-model="msg">

        <!-- 方式1 -->

        <h5>{{msg}}</h5>

        <!-- 方式2 -->

        <h5 ng-bind="msg"></h5>

        <!-- 方式3 -->

        <h5 ng-clock class="ng-clock">{{msg}}</h5>

    </div>

    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>

    <script>

        angular.module('myapp',[])

        .controller('MyCtrl',function($scope){

            $scope.msg = 'Hello Angular!'

        })

     </script>

</body>

</html>

AngularJs学习——实现数据绑定的三种方式的更多相关文章

  1. 【转】Spring学习---Bean配置的三种方式（XML、注解、Java类）介绍与对比

    [原文]https://www.toutiao.com/i6594205115605844493/ Spring学习Bean配置的三种方式(XML.注解.Java类)介绍与对比 本文将详细介绍Spri ...

  2. PHP的学习--连接MySQL的三种方式

    记录一下PHP连接MySQL的三种方式. 先mock一下数据,可以执行一下sql. /*创建数据库*/ CREATE DATABASE IF NOT EXISTS `test`; /*选择数据库*/ ...

  3. Spring学习（二）三种方式的依赖注入

    1.前言 上一篇讲到第一个Spring项目的创建.以及bean的注入.当然.注入的方式一共有三种.本文将展开细说. 1.set注入:本质是通过set方法赋值 1.创建老师类和课程类 1.Course ...

  4. 【Android学习】数据传递三种方式

    1.Application 注意在清单文件中的Application节点下注册android:name属性, 继承Application类,重写onCreate方法, 使用数据时,实例化自定义类时需要 ...

  5. AngularJs中关于ng-class的三种使用方式说明

    在开发中我们通常会遇到一种需求:一个元素在不同的状态需要展现不同的样子. 而在这所谓的样子当然就是改变其css的属性,而实现能动态的改变其属性值,必然只能是更换其class属性 这里有三种方法: 第一 ...

  6. angularjs 自定义服务的三种方式

    angularjs 中可通过三种($provider,$factory,$service)方式自定义服务,以下是不同的实现形式: // 定义module , module中注入$providevar ...

  7. ios网络学习------4 UIWebView的加载本地数据的三种方式

    ios网络学习------4 UIWebView的加载本地数据的三种方式 分类: IOS2014-06-27 12:56 959人阅读 评论(0) 收藏 举报 UIWebView是IOS内置的浏览器, ...

  8. java核心知识点学习----创建线程的第三种方式Callable和Future CompletionService

    前面已经指出通过实现Runnable时,Thread类的作用就是将run()方法包装成线程执行体,那么是否可以直接把任意方法都包装成线程执行体呢?Java目前不行,但其模仿者C#中是可以的. Call ...

  9. 0036 Java学习笔记-多线程-创建线程的三种方式

    创建线程 创建线程的三种方式: 继承java.lang.Thread 实现java.lang.Runnable接口 实现java.util.concurrent.Callable接口 所有的线程对象都 ...

随机推荐

  1. NO-ZERO(空格补全)

    The NO-ZERO command follows the DATA statement REPORT Z_Test123_01. DATA: W_NUR(10) TYPE N. MOVE 50 ...

  2. SQL数据库 面试题

    一.sql理论题 1．触发器的作用? 答:触发器是一中特殊的存储过程,主要是通过事件来触发而被执行的.它可以强化约束,来维护数据的完整性和一致性,可以跟踪数据库内的操作从而不允许未经许可的更新和变化. ...

  3. Sqoop的安装配置及使用

    一.Sqoop基础:连接关系型数据库与Hadoop的桥梁 1.1 Sqoop的基本概念 Hadoop正成为企业用于大数据分析的最热门选择,但想将你的数据移植过去并不容易.Apache Sqoop正在加 ...

  4. 在spring+beranate中多数据源中使用 ThreadLocal ，总结的原理 --费元星

    设计模式 首先,ThreadLocal 不是用来解决共享对象的多线程访问问题的,一般情况下,通过ThreadLocal.set() 到线程中的对象是该线程自己使用的对象,其他线程是不需要访问的,也访问 ...

  5. Spring+Hiberate 多数据源的网文整理

    解决方案: http://www.th7.cn/Program/java/2011/10/23/44664.shtml 分析共享Spring配置数据源四种方式(附相应jar包)  :http://ww ...

  6. 复制MySQL数据库A到另外一个MySQL数据库B（仅仅针对innodb数据库引擎）

    方案一:(不用太大的变化my.ini文件) copy 原数据库A中的   数据库(database)  ib_logfile1  ib_logfile0   ibdata1: 关闭目的数据库B: 备份 ...

  7. 2018春季校园招聘笔经面经合集：Java开发岗

    2018春季校园招聘笔经面经合集:Java开发岗 以下为精选面经: 美团外卖配送部后台开发面经 nowcoder.com/discuss/76 春招总结,干货满满 nowcoder.com/discu ...

  8. Android学习笔记之，调用系统图库，添加自定义字体，屏幕截图

    新年开始的第一天就来学习了慕课迎春活动中的Android心愿分享一课,学到了几个知识点,在此记录一下. 1.调用系统图库调用系统图库用的是intent,步骤为弹出系统图库选择器,选择图片后获取到所选择 ...

  9. ES5新增数组方法（3）：some

    检查数组元素中是否有元素符合指定. // 数组中的元素部分满足指定条件返回true let arr = [1, 3, 5, 7, 9]; console.log(arr.some((value, in ...

  10. Python request 简单使用

    Requests 是用Python语言编写,基于 urllib,采用 Apache2 Licensed 开源协议的 HTTP 库.它比 urllib 更加方便,可以节约我们大量的工作,完全满足 HTT ...