AngularJS基础 ng-model 指令详解及示例代码


Posted in Javascript onAugust 02, 2016

AngularJS ng-model 指令

AngularJS 实例

绑定输入框的值到 scope 变量中:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

<input ng-model="name">

<p>input 输入框的值绑定了变量 "name" :</p>
{{name}}

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.name = "John Doe";
});
</script>

<p>该实例演示了如何使用 ng-model 指令绑定输入框的值到 scope 变量中。</p>

</body>
</html>

定义和用法

ng-model 指令绑定了 HTML 表单元素到 scope 变量中。

如果 scope 中不存在变量, 将会创建它。

语法

<element ng-model="name"></element>

<input>, <select>, <textarea>, 元素支持该指令。

参数值

 

描述
separator 你想要绑定到表单域的属性名。

 以上就是对AngularJS ng-model资料的整理,后续继续补充相关资料。

Javascript 相关文章推荐
使用jQuery向asp.net Mvc传递复杂json数据-ModelBinder篇
May 07 Javascript
JS遍历Json字符串中键值对先转成JSON对象再遍历
Aug 15 Javascript
JavaScript实现的链表数据结构实例
Apr 02 Javascript
js实现的全国省市二级联动下拉选择菜单完整实例
Aug 17 Javascript
Js+Ajax,Get和Post在使用上的区别小结
Jun 08 Javascript
jquery实现百叶窗效果
Jan 12 Javascript
vue实现todolist单页面应用
Apr 11 Javascript
原生js获取left值和top值的三种方法
Aug 02 Javascript
Node.js实现连接mysql数据库功能示例
Sep 15 Javascript
jquery实现选项卡切换代码实例
May 14 jQuery
vue结合el-upload实现腾讯云视频上传功能
Jul 01 Javascript
代码块高亮可复制显示js插件highlight.js+clipboard.js整合
Feb 15 Javascript
JS获取input file绝对路径的方法(推荐)
Aug 02 #Javascript
JavaScript实现复制文章自动添加版权
Aug 02 #Javascript
js获取上传文件的绝对路径实现方法
Aug 02 #Javascript
AngularJS基础 ng-list 指令详解及示例代码
Aug 02 #Javascript
jQuery设置聚焦并使光标位置在文字最后的实现方法
Aug 02 #Javascript
jQuery实现的placeholder效果完整实例
Aug 02 #Javascript
AngularJS基础 ng-keyup 指令简单示例
Aug 02 #Javascript
You might like
使用PHP 5.0创建图形的巧妙方法
2010/10/12 PHP
php遍历树的常用方法汇总
2015/06/18 PHP
php数字每三位加逗号的功能函数
2015/10/22 PHP
php使用parse_str实现查询字符串解析到变量中的方法
2017/02/17 PHP
JavaScript replace(rgExp,fn)正则替换的用法
2010/03/04 Javascript
jQuery多项选项卡的实现思路附样式及代码
2014/06/03 Javascript
JQuery控制Radio选中方法分析
2015/05/29 Javascript
JS模拟按钮点击功能的方法
2015/12/22 Javascript
javascript动态获取登录时间和在线时长
2016/02/25 Javascript
Three.js学习之文字形状及自定义形状
2016/08/01 Javascript
禁用backspace网页回退功能的实现代码
2016/11/15 Javascript
简单快速的实现js计算器功能
2017/08/17 Javascript
vue2.0基于vue-cli+element-ui制作树形treeTable
2019/04/30 Javascript
JS字符串常用操作方法实例小结
2019/06/24 Javascript
js变量值传到php过程详解 将php解析成数据
2019/06/26 Javascript
对vue中的事件穿透与禁止穿透实例详解
2019/10/28 Javascript
javascript实现移动端触屏拖拽功能
2020/07/29 Javascript
[05:48]DOTA2英雄梦之声vol21 屠夫
2014/06/20 DOTA
python实现的udp协议Server和Client代码实例
2014/06/04 Python
利用Python代码实现数据可视化的5种方法详解
2018/03/25 Python
OpenCV 表盘指针自动读数的示例代码
2020/04/10 Python
python开发一个解析protobuf文件的简单编译器
2020/11/17 Python
日本网路线上商品代购服务:转送JAPAN
2016/08/05 全球购物
Columbia美国官网:美国著名的户外服装品牌
2016/11/24 全球购物
马来西亚在线时尚女装商店:KEI MAG
2017/09/28 全球购物
公司员工的自我评价范例
2013/11/01 职场文书
房地产销售大学生自我评价分享
2013/11/11 职场文书
幼儿园庆六一游园活动方案
2014/01/29 职场文书
大四学生找工作的自荐信
2014/03/27 职场文书
电力安全事故反思
2014/04/27 职场文书
食品质量与安全专业毕业生求职信
2014/08/11 职场文书
2014年社区卫生工作总结
2014/12/18 职场文书
团员自我评价范文
2015/03/10 职场文书
2015年效能监察工作总结
2015/04/23 职场文书
Mysql关于数据库是否应该使用外键约束详解说明
2021/10/24 MySQL
Python中生成随机数据安全性、多功能性、用途和速度方面进行比较
2022/04/14 Python