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 相关文章推荐
input 输入框获得/失去焦点时隐藏/显示文字(jquery版)
Apr 02 Javascript
XML文件转化成NSData对象的方法
Aug 12 Javascript
JavaScript面向对象之私有静态变量实例分析
Jan 14 Javascript
WordPress 单页面上一页下一页的实现方法【附代码】
Mar 10 Javascript
jQuery提示插件qTip2用法分析(支持ajax及多种样式)
Jun 08 Javascript
微信小程序如何获知用户运行小程序的场景教程
May 17 Javascript
Angular HMR(热模块替换)功能实现方法
Apr 04 Javascript
vue axios数据请求及vue中使用axios的方法
Sep 10 Javascript
详解如何给React-Router添加路由页面切换时的过渡动画
Apr 25 Javascript
JavaScript内置对象math,global功能与用法实例分析
Jun 10 Javascript
使用typescript改造koa开发框架的实现
Feb 04 Javascript
在HTML5 localStorage中存储对象的示例代码
Apr 21 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 at(@)符号的用法简介
2009/07/11 PHP
Ext.data.PagingMemoryProxy分页一次性读取数据的实现代码
2010/04/07 PHP
ThinkPHP分页类使用详解
2014/03/05 PHP
PHP网页缓存技术优点及代码实例
2020/07/29 PHP
JavaScript 申明函数的三种方法 每个函数就是一个对象(一)
2009/12/04 Javascript
JQueryEasyUI datagrid框架的基本使用
2013/04/08 Javascript
javascript 事件处理示例分享
2014/12/31 Javascript
JS选中checkbox后获取table内一行TD所有数据的方法
2015/07/01 Javascript
vue+axios实现登录拦截的实例代码
2017/05/22 Javascript
js实现分页功能
2017/05/24 Javascript
Bootstrap Table从零开始
2017/06/30 Javascript
JS去掉字符串中所有的逗号
2017/10/18 Javascript
详解vue移动端日期选择组件
2018/02/22 Javascript
AjaxUpLoad.js实现文件上传功能
2018/03/02 Javascript
vue 实现模糊检索并根据其他字符的首字母顺序排列
2019/09/19 Javascript
在Linux下使用Python的matplotlib绘制数据图的教程
2015/06/11 Python
Python中Class类用法实例分析
2015/11/12 Python
Python GUI编程 文本弹窗的实例
2019/06/11 Python
使用Python计算玩彩票赢钱概率
2019/06/26 Python
简单了解python数组的基本操作
2019/11/26 Python
Python 将代码转换为可执行文件脱离python环境运行(步骤详解)
2021/01/25 Python
python urllib和urllib3知识点总结
2021/02/08 Python
利用CSS3实现折角效果实例源码
2016/09/28 HTML / CSS
使用SVG实现提示框功能的示例代码
2020/06/05 HTML / CSS
Perfume’s Club法国站:购买香水和化妆品
2019/05/02 全球购物
通用C#笔试题附答案
2016/11/26 面试题
幼儿园元旦家长感言
2014/02/27 职场文书
技术总监管理岗位职责
2014/03/09 职场文书
机械专业技术员求职信
2014/06/14 职场文书
优秀党员学习焦裕禄精神思想汇报范文
2014/09/10 职场文书
公安机关查摆剖析材料
2014/10/10 职场文书
党的群众路线教育实践活动个人整改措施材料
2014/11/04 职场文书
2016年父亲节寄语
2015/12/04 职场文书
演讲开头怎么书写?
2019/08/06 职场文书
Go语言切片前或中间插入项与内置copy()函数详解
2021/04/27 Golang
戴尔Win11系统no bootable devices found解决教程
2022/09/23 数码科技