基本介绍

angularjs可以实现数据的双向绑定：（1）视图到模型的数据绑定，（2）模型到数据的绑定

基本使用

1、ng-model可以实现视图到模型的数据传输

2、{{name}}可以实现模型到视图的数据传输

<!DOCTYPE html>

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

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="../libs/angular.min.js"></script>

</head>

<body>

<div ng-controller="DemoController">

    <input type="text" ng-model="msg">

    <button ng-click="show()">点击</button>

    <h1>{{msg}}</h1>

</div>

<script>

    var App = angular.module('App', []);

    App.controller('DemoController', ['$scope', function ($scope) {

        $scope.name = 'wqx';

        $scope.show = function () {

            alert($scope.msg);

        }

    }]);

    //{{}}会闪烁，出现{{}}，

    // ng-cloak可以解决问题，原理在页面添加一个style样式，渲染的时候设置dispaly为none，到了加载绑定的数据

    // 再将dispaly改为block

    // <div ng-cloak>{{name}}</div>

    // 注意必须将引入的angular放入头部

    //要实现数据从视图到模型的绑定需要表单元素

    //ng-model,可将$scope.msg的值进行更改

</script>

</body>

</html>

Angular——数据绑定的更多相关文章

  1. 简话Angular 01 初识Angular 数据绑定

    1. Angular有哪些突出优点 1) MVC 基于Html-Javascript 2) 依赖注入 3) 数据双向绑定,响应式页面设计 4) 模块化,自定义指令 2. 简话数据绑定 1) 代码: & ...

  2. angular 数据绑定

    1.ng-band 使用在index.html页面使用,该页面不要直接使用双花括号,否则网络延迟的时候页面会显示双花括号,由于通常只在index.html里导入angular.js,所以在其他模板页面 ...

  3. angular数据绑定---js全局学习

    <!DOCTYPE html> <html ng-app> <head> <title>Simple app</title> </he ...

  4. Angular数据双向绑定

    Angular数据双向绑定 AngularJS诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀的前端JS框架,已经被用于Google的多款产品当中.Angul ...

  5. [Angular Tutorial] 13 -REST and Custom Services

    在这一步中,我们将会改变我们获取数据的方式. ·我们定义一个代表RESTful客户端的自定义服务.使用这个客户端,我们可以用一种更简单的方法向服务端请求数据,而不用处理更底层的$httpAPI,HTT ...

  6. angular、vue使用感受

    最近开始学习并使用vue.js,并使用vue+node开发了一个移动端APP来练手,下面想聊聊我对于vue的粗浅看法,并将它和angular进行一些对比: 1.vue是一个轻量.高效的前端组件化框架, ...

  7. vue入门 vue与react和Angular的关系和区别

    一.为什么学习vue.js vue.js兼具angular.js和react的优点,并且剔除了他们的缺点 官网:http://cn.vuejs.org/ 手册:http://cn.vuejs.org/ ...

  8. vue和angular的区别：

    相同: 1.数据绑定:vue和angular绑定都可以用{{}} 2.都支持内置指令和自定义指令 3.都支持内置过滤器和自定义过滤器. 区别: 1.学习成本和API 设计:vue相比于angular来 ...

  9. Angular 下的 directive （part 2）

    ngCloak ngCloak指令被使用在,阻止angular模板从浏览器加载的时候出现闪烁的时候.使用它可以避免闪烁问题的出现.   该指令可以应用于<body>元素,但首选使用多个ng ...

随机推荐

  1. noip模拟赛 业务办理

    [问题描述]在银行柜台前,有 n 个顾客排队办理业务. 队伍中从前往后,第 i 位顾客办理业务需要ti 分钟时间. 一位顾客的等待时间定义为:队伍中在他之前的所有顾客和他自己的办理业务时间的总和.第 ...

  2. [K/3Cloud] 首页增加一个自定义页签及页面内容

    在K3Cloud登录后的门户首页增加一个页签,如增加一个[BBS论坛] 2013-7-30 11:18:51 上传 下载附件 (84.81 KB)  增加页签 可以这么来做: 进入BOS IDE ,找 ...

  3. 洛谷——P1720 月落乌啼算钱

    题目背景 (本道题目木有以藏歌曲……不用猜了……) <爱与愁的故事第一弹·heartache>最终章. 吃完pizza,月落乌啼知道超出自己的预算了.为了不在爱与愁大神面前献丑,只好还是硬 ...

  4. - > 动规讲解基础讲解八——正整数分组

    将一堆正整数分为2组,要求2组的和相差最小.例如:1 2 3 4 5,将1 2 4分为1组,3 5分为1组,两组和相差1,是所有方案中相差最少的. 整数个数n<=100,所有整数的和<=1 ...

  5. strace oracle

    http://www.itpub.net/thread-1865593-1-1.html

  6. Redhat 6.1安装ArcGIS Server10.1

    http://blog.csdn.net/linghe301/article/details/7762985 操作环境:Redhat 6.1 Linux 安装ArcGIS Server10.1之前,还 ...

  7. 【python】蛋疼的中文乱码解决方案

    转自: http://yooooo.us/2013/python-encoding-decoding?variant=zh-cn

  8. 交换机tagged与untagged的关系深入探讨

    端口接收数据时: 如果端口是tagged方式,当数据包本身不包含VLAN的话,输入的数据包就加上该缺省vlan:如果数据包本身已经包含了VLAN,那么就不再添加. 如果是untagged方式,输入的数 ...

  9. Office EXCEL如何批量把以文本形式存储的数字转换为数字

    如果"以文本形式存储的数字"不多,则点击右边的感叹号,转换为数字即可.但是如果有几万个单元格就不能这样做了.   先把他旁边的一列填充为1(选中该列,然后按Ctrl+F查找,按列查 ...

  10. npm/bower/brew

    npm: npm(node package manager)node包管理器,用来下载发布第三方工具包,例如:代码的压缩.合并.编译的插件包.主要功能:安装.卸载.更新.查看.搜索.发布等 npm的具 ...