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 自定义函数写法分享
Mar 30 Javascript
jQuery消息提示框插件Tipso
May 04 Javascript
javascript js 操作数组 增删改查的简单实现
Jun 20 Javascript
前端框架Vue.js构建大型应用浅析
Sep 12 Javascript
微信小程序 地图定位简单实例
Oct 14 Javascript
JavaScript函数柯里化原理与用法分析
Mar 31 Javascript
ES6学习教程之对象的扩展详解
May 02 Javascript
vue音乐播放器插件vue-aplayer的配置及其使用实例详解
Jul 10 Javascript
JS设置随机出现2个数字的实例代码
Jul 19 Javascript
Angular事件之不同组件间传递数据的方法
Nov 15 Javascript
详解VS Code使用之Vue工程配置format代码格式化
Mar 20 Javascript
vue2 拖动排序 vuedraggable组件的实现
Aug 08 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
一个高ai的分页函数和一个url函数
2006/10/09 PHP
我的论坛源代码(九)
2006/10/09 PHP
Laravel中获取路由参数Route Parameters的五种方法示例
2017/09/29 PHP
php json转换相关知识(小结)
2018/12/21 PHP
JavaScript 异步调用框架 (Part 1 - 问题 &amp; 场景)
2009/08/03 Javascript
jQuery html()方法使用不了无法显示内容的问题
2014/08/06 Javascript
js使用心得分享
2015/01/13 Javascript
jQuery实现网站添加高亮突出显示效果的方法
2015/06/26 Javascript
再次谈论Javascript中的this
2016/06/23 Javascript
浅谈window.onbeforeunload() 事件调用ajax
2016/06/29 Javascript
JavaScript实现隐藏省略文字效果的方法
2017/04/27 Javascript
移动web开发之touch事件实例详解
2018/01/17 Javascript
js自定义trim函数实现删除两端空格功能
2018/02/09 Javascript
js实现json数组分组合并操作示例
2019/02/12 Javascript
pm2发布node配置文件ecosystem.json详解
2019/05/15 Javascript
vue canvas绘制矩形并解决由clearRec带来的闪屏问题
2019/09/02 Javascript
[01:02:03]2014 DOTA2华西杯精英邀请赛 5 24 NewBee VS VG
2014/05/26 DOTA
python模拟登录百度代码分享(获取百度贴吧等级)
2013/12/27 Python
神经网络python源码分享
2017/12/15 Python
python梯度下降法的简单示例
2018/08/31 Python
centos7之Python3.74安装教程
2019/08/15 Python
Pytorch加载部分预训练模型的参数实例
2019/08/18 Python
对CSS3选择器的研究(详解)
2016/09/16 HTML / CSS
HTML5实现自带进度条和滑块滑杆效果
2018/04/17 HTML / CSS
瑜伽服装品牌:露露柠檬(lululemon athletica)
2017/06/04 全球购物
工程建设实施方案
2014/03/14 职场文书
施工单位安全责任书
2014/07/24 职场文书
争先创优心得体会
2014/09/12 职场文书
教师批评与自我批评
2014/10/15 职场文书
捐助感谢信
2015/01/22 职场文书
个人党性锻炼总结
2015/03/05 职场文书
浅谈Python基础之列表那些事儿
2021/05/11 Python
pytorch中[..., 0]的用法说明
2021/05/20 Python
如何用python清洗文件中的数据
2021/06/18 Python
关于python中模块和重载的问题
2021/11/02 Python
升级 Win11 还是坚守 Win10?微软 Win11 新系统缺失功能大盘点
2022/04/05 数码科技