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 相关文章推荐
通过js获取div的background-image属性
Oct 15 Javascript
jQuery简单图表peity.js使用示例
May 02 Javascript
JavaScript字符串对象split方法入门实例(用于把字符串分割成数组)
Oct 16 Javascript
JS+CSS实现表格高亮的方法
Aug 05 Javascript
jquery+php实现滚动的数字特效
Nov 29 Javascript
微信小程序去哪里找 小程序到底如何使用(附小程序名单)
Jan 09 Javascript
老生常谈javascript中逻辑运算符&amp;&amp;和||的返回值问题
Apr 13 Javascript
Angularjs实现多图片上传预览功能
Jul 18 Javascript
Egg.js 中 AJax 上传文件获取参数的方法
Oct 10 Javascript
写gulp遇到的ES6问题详解
Dec 03 Javascript
小程序如何使用分包加载的实现方法
May 22 Javascript
uniapp微信小程序:key失效的解决方法
Jan 20 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
动态生成gif格式的图像要注意?
2006/10/09 PHP
php 调用远程url的六种方法小结
2009/11/02 PHP
PHP实现时间轴函数代码
2011/10/08 PHP
一个不易被发现的PHP后门代码解析
2014/07/05 PHP
CodeIgniter配置之config.php用法实例分析
2016/01/19 PHP
详解yii2使用多个数据库的案例
2017/06/16 PHP
php设计模式之观察者模式定义与用法经典示例
2019/09/19 PHP
JavaScript去掉空格的方法集合
2010/12/28 Javascript
Json对象与Json字符串互转(4种转换方式)
2013/03/27 Javascript
js中replace的用法总结
2013/12/27 Javascript
jQuery操作DOM之获取表单控件的值
2015/01/23 Javascript
js实现表单多按钮提交action的处理方法
2015/10/24 Javascript
jQuery Ajax 实例代码 ($.ajax、$.post、$.get)
2016/04/29 Javascript
AngularJS+Bootstrap实现多文件上传与管理
2016/11/08 Javascript
canvas绘制万花筒效果(代码分享)
2017/01/20 Javascript
node结合swig渲染摸板的方法
2018/04/11 Javascript
对angularJs中ng-style动态改变样式的实例讲解
2018/09/30 Javascript
JS实现倒计时图文效果
2018/11/17 Javascript
vue中组件通信的八种方式(值得收藏!)
2019/08/09 Javascript
Vue通过Blob对象实现导出Excel功能示例代码
2020/07/31 Javascript
JQuery绑定事件四种实现方法解析
2020/12/02 jQuery
[01:11:32]VG vs FNATIC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
[45:16]完美世界DOTA2联赛PWL S3 Magma vs Phoenix 第一场 12.12
2020/12/16 DOTA
python处理中文编码和判断编码示例
2014/02/26 Python
收集的几个Python小技巧分享
2014/11/22 Python
详解Python字符串对象的实现
2015/12/24 Python
Python实现的维尼吉亚密码算法示例
2018/04/12 Python
numpy中实现ndarray数组返回符合特定条件的索引方法
2018/04/17 Python
Python合并同一个文件夹下所有PDF文件的方法
2019/03/11 Python
PyTorch中 tensor.detach() 和 tensor.data 的区别详解
2020/01/06 Python
台湾屈臣氏网路商店:Watsons台湾
2020/12/29 全球购物
文明村创建实施方案
2014/03/27 职场文书
竞聘书模板
2014/03/31 职场文书
法制宣传月活动总结
2014/04/29 职场文书
激励员工的口号
2014/06/16 职场文书
企业安全隐患排查治理制度
2015/08/05 职场文书