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 相关文章推荐
How to Auto Include a Javascript File
Feb 02 Javascript
精解window.setTimeout()&amp;window.setInterval()使用方式与参数传递问题!
Nov 23 Javascript
jquery 的 $(&quot;#id&quot;).html() 无内容的解决方法
Jun 07 Javascript
AngularJs中 ng-repeat指令中实现含有自定义指令的动态html的方法
Jan 19 Javascript
JavaScript实现星星等级评价功能
Mar 22 Javascript
javascript函数的节流[throttle]与防抖[debounce]
Nov 15 Javascript
利用Decorator如何控制Koa路由详解
Jun 26 Javascript
Angularjs实现页面模板清除的方法
Jul 20 Javascript
基于axios 解决跨域cookie丢失的问题
Sep 26 Javascript
js实现京东秒杀倒计时功能
Jan 21 Javascript
在vue中使用防抖函数组件操作
Jul 26 Javascript
微信小程序自定义底部弹出框功能
Nov 18 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 判断常量,变量和函数是否存在
2009/04/26 PHP
PHP微信公众号开发之微信红包实现方法分析
2017/07/14 PHP
PHP调用API接口实现天气查询功能的示例
2017/09/21 PHP
jquery 学习之一 对象访问
2010/11/23 Javascript
判断用户的在线状态 onbeforeunload事件
2011/03/05 Javascript
JavaScript监听和禁用浏览器回车事件实例
2015/01/31 Javascript
Javascript使用post方法提交数据实例
2015/08/03 Javascript
微信小程序-详解数据缓存
2016/11/24 Javascript
微信小程序 跳转传参数与传对象详解及实例代码
2017/03/14 Javascript
js基于FileSaver.js 浏览器导出Excel文件的示例
2017/08/15 Javascript
基于IView中on-change属性的使用详解
2018/03/15 Javascript
vue-cli 如何打包上线的方法示例
2018/05/08 Javascript
vue router 组件的高级应用实例代码
2019/04/08 Javascript
vue-router 前端路由之路由传值的方式详解
2019/04/30 Javascript
python中set常用操作汇总
2016/06/30 Python
各种Python库安装包下载地址与安装过程详细介绍(Windows版)
2016/11/02 Python
使用python对文件中的单词进行提取的方法示例
2018/12/21 Python
python实现词法分析器
2019/01/31 Python
Python获取Redis所有Key以及内容的方法
2019/02/19 Python
Jupyter Notebook 文件默认目录的查看以及更改步骤
2020/04/14 Python
浅谈keras中自定义二分类任务评价指标metrics的方法以及代码
2020/06/11 Python
python实现数学模型(插值、拟合和微分方程)
2020/11/13 Python
如何向scrapy中的spider传递参数的几种方法
2020/11/18 Python
用HTML5实现手机摇一摇的功能的教程
2012/10/30 HTML / CSS
html5 跨文档消息传输示例探讨
2013/04/01 HTML / CSS
HTML5 图片预加载的示例代码
2020/03/25 HTML / CSS
澳大利亚床上用品、浴巾和家居用品购物网站:Bambury
2020/04/16 全球购物
法国低价在线宠物商店:bitiba.fr
2020/07/03 全球购物
SQL Server笔试题
2012/01/10 面试题
实习单位推荐信范文
2013/11/27 职场文书
吸烟检讨书2000字
2014/02/13 职场文书
教师岗位职责
2015/02/03 职场文书
2015年社区党务工作总结
2015/04/21 职场文书
2015年计划生育责任书
2015/05/08 职场文书
告诉你创业计划书的8个实用技巧
2019/07/12 职场文书
浅谈MySQL函数
2021/10/05 MySQL