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 相关文章推荐
比较简单的一个符合web标准的JS调用flash方法
Nov 29 Javascript
基于Arcgis for javascript实现百度地图ABCD marker的效果
Sep 12 Javascript
Jquery ui datepicker设置日期范围,如只能隔3天【实现代码】
May 04 Javascript
微信小程序 开发经验整理
Feb 15 Javascript
Ajax异步获取html数据中包含js方法无效的解决方法
Feb 20 Javascript
JS实现获取汉字首字母拼音、全拼音及混拼音的方法
Nov 14 Javascript
vue+webpack模拟后台数据的示例代码
Jul 26 Javascript
微信小程序实现工作时间段选择
Feb 15 Javascript
自定义Vue中的v-module双向绑定的实现
Apr 17 Javascript
js实现随机点名程序
Sep 17 Javascript
JS前端广告拦截实现原理解析
Feb 17 Javascript
Vue中computed和watch有哪些区别
Dec 19 Vue.js
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 设置MySQL连接字符集的方法
2011/01/02 PHP
php cli 小技巧
2013/06/03 PHP
使用php+swoole对client数据实时更新(一)
2016/01/07 PHP
Symfony控制层深入详解
2016/03/17 PHP
php中bind_param()函数用法分析
2017/03/28 PHP
[JS]点出统计器
2020/10/11 Javascript
在js文件中如何获取basePath处理js路径问题
2013/07/10 Javascript
jQuery中closest()函数用法实例
2015/01/07 Javascript
jquery实现简单的二级导航下拉菜单效果
2015/09/07 Javascript
JavaScript中Object.prototype.toString方法的原理
2016/02/24 Javascript
如何消除inline-block属性带来的标签间间隙
2016/03/31 Javascript
[原创]Bootstrap 中下拉菜单修改成鼠标悬停直接显示
2016/04/14 Javascript
JavaScript直播评论发弹幕切图功能点集合效果代码
2016/06/26 Javascript
浅谈jQuery为哪般去掉了浏览器检测
2016/08/29 Javascript
JS实现鼠标移上去显示图片或微信二维码
2016/12/14 Javascript
jQuery动态移除与增加onclick属性的方法详解
2018/06/07 jQuery
聊聊Vue 中 title 的动态修改问题
2019/06/11 Javascript
编写v-for循环的技巧汇总
2020/12/01 Javascript
Vue.js桌面端自定义滚动条组件之美化滚动条VScroll
2020/12/01 Vue.js
python处理html转义字符的方法详解
2016/07/01 Python
django2 快速安装指南分享
2018/01/05 Python
浅谈Python中重载isinstance继承关系的问题
2018/05/04 Python
详解Python中的正斜杠与反斜杠
2019/08/09 Python
python PyQt5/Pyside2 按钮右击菜单实例代码
2019/08/17 Python
Python3.8对可迭代解包的改进及用法详解
2019/10/15 Python
python将四元数变换为旋转矩阵的实例
2019/12/04 Python
Python基于模块Paramiko实现SSHv2协议
2020/04/28 Python
Python实现CAN报文转换工具教程
2020/05/05 Python
python给视频添加背景音乐并改变音量的具体方法
2020/07/19 Python
求职者应聘的自我评价
2013/10/16 职场文书
小学教师自我鉴定
2013/11/07 职场文书
市场营销管理制度
2014/01/29 职场文书
献爱心大型公益活动策划方案
2014/09/15 职场文书
暑假开始了,你的暑假学习计划写好了吗?
2019/07/04 职场文书
学会用Python实现滑雪小游戏,再也不用去北海道啦
2021/05/20 Python
HTML+CSS 实现顶部导航栏菜单制作
2021/06/03 HTML / CSS