三种方式：

  • 方式一：<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. 人工智能，图片识别，与GUI编程

    GUI编程: https://sourceforge.net/projects/pyqt/ 百度aip图片识别 https://pypi.python.org/pypi/baidu-aip

  2. Linux下创建pycharm的快捷方式

    第一步:创建桌面快捷方式文件Pycharm.desktop,并打开 sudo gedit /usr/share/applications/Pycharm.desktop 第二步:在打开的文件Pycha ...

  3. Linux-Shell脚本编程-学习-2-Linux基本命令

    接上篇,接着学习Linux下的部分命令,后面的这些命令用到的频率可能没有那么多,不过也是经常需要的. 第一部分:程序监测部分,ps和top top命令可能比较眼熟,所以我们先说ps ps命令最烦人了, ...

  4. fiddler显示出服务器IP方法

    fiddler的配置中是看不到服务器的IP的 1.打开进入fiddler界面,按快捷键ctrl+r 或者按照图中点击,进入customrules.js文件里. 2.在customrules.js文件里 ...

  5. Struts2(六.用标签显示用户列表及Value Stack和Stack Context)

    一.用Struts2标签显示用户列表 原理: 在struts中可以通过在action中将所有用户的信息存入到某个范围中,然后转向userlist.jsp,进行访问 原则: 在jsp网页上,尽量不要出现 ...

  6. 机器学习/逻辑回归（logistic regression）/--附python代码

    个人分类: 机器学习 本文为吴恩达<机器学习>课程的读书笔记,并用python实现. 前一篇讲了线性回归,这一篇讲逻辑回归,有了上一篇的基础,这一篇的内容会显得比较简单. 逻辑回归(log ...

  7. 九度OJ--Q1165

    import java.util.ArrayList;import java.util.Scanner; /* * 题目描述: * 读入数据string[ ],然后读入一个短字符串.要求查找strin ...

  8. [PocketFlow]解决TensorFLow在COCO数据集上训练挂起无输出的bug

    1. 引言 因项目要求,需要在PocketFlow中添加一套PeleeNet-SSD和COCO的API,具体为在datasets文件夹下添加coco_dataset.py, 在nets下添加pelee ...

  9. const 常量与 define常量的区别

    c++中的常量可以使用const定义,也可以使用#define宏定义的方式:二者区别如下: - **区别** 1. const定义的常量有自己的数据类型,编译器可以对其进行严格的类型检查:但是defi ...

  10. linux备忘录-日志档案

    linux的日志档案 linux的日志档案记录系统或程序在运行过程中产生的一些信息,例如事件的记录,错误的记录等等.特别是在发生错误时,我们可以通过日志档案找到错误发生的根源,例如当我们无法启动邮件服 ...