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与下拉列表处理问题解决
Feb 13 Javascript
angularjs学习笔记之三大模块(modal,controller,view)
Sep 26 Javascript
jQuery实现的文字hover颜色渐变效果实例
Feb 20 Javascript
深入理解jQuery事件绑定
Jun 02 Javascript
Vue方法与事件处理器详解
Dec 01 Javascript
原生js验证简洁注册登录页面
Dec 17 Javascript
vue深入解析之render function code详解
Jul 18 Javascript
基于ExtJs在页面上window再调用Window的事件处理方法
Jul 26 Javascript
浅谈Webpack下多环境配置的思路
Jun 27 Javascript
利用Webpack实现小程序多项目管理的方法
Feb 25 Javascript
js实现掷骰子小游戏
Oct 24 Javascript
JavaScript实现消消乐的源代码
Jan 12 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中判断数组是一维,二维,还是多维的解决方法
2013/05/04 PHP
探讨PHP使用eAccelerator的API开发详解
2013/06/09 PHP
手把手教你打印出PDF(关于fpdf的简单应用)
2013/06/25 PHP
javascript 多浏览器 事件大全
2010/03/23 Javascript
19个很有用的 JavaScript库推荐
2011/06/27 Javascript
基于jquery的拖动布局插件
2011/11/25 Javascript
在jquery boxy中添加百度地图坐标拾取注意流程
2014/04/03 Javascript
jQuery中hover方法和toggle方法使用指南
2015/02/27 Javascript
jQuery解决浏览器兼容性问题案例分析
2016/04/15 Javascript
jquery自动补齐功能插件flexselect用法示例
2016/08/06 Javascript
vue2.0 自定义 饼状图 (Echarts)组件的方法
2018/03/02 Javascript
NodeJs项目中关闭ESLint的方法
2018/08/09 NodeJs
详解在React中跨组件分发状态的三种方法
2018/08/09 Javascript
antd table按表格里的日期去排序操作
2020/11/17 Javascript
[51:36]Optic vs Newbee 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
python 切片和range()用法说明
2013/03/24 Python
在Mac OS上部署Nginx和FastCGI以及Flask框架的教程
2015/05/02 Python
Python之dict(或对象)与json之间的互相转化实例
2018/06/05 Python
python实现ip代理池功能示例
2019/07/05 Python
解决Djang2.0.1中的reverse导入失败的问题
2019/08/16 Python
pandas的相关系数与协方差实例
2019/12/27 Python
Python递归函数特点及原理解析
2020/03/04 Python
使用python计算三角形的斜边例子
2020/04/15 Python
Python中的xlrd模块使用原理解析
2020/05/21 Python
2019年.net常见面试问题
2012/02/12 面试题
本科生职业生涯规划书范文
2014/01/21 职场文书
先进班级集体事迹材料
2014/01/30 职场文书
接待员岗位责任制
2014/02/10 职场文书
毕业生个人求职自荐信
2014/02/26 职场文书
大学生学习2014年全国两会心得体会
2014/03/12 职场文书
《跟踪台风的卫星》教学反思
2014/04/10 职场文书
高考满分作文赏析(2篇)
2019/08/12 职场文书
python爬虫框架feapde的使用简介
2021/04/20 Python
浅谈MySQL函数
2021/10/05 MySQL
Windows环境下实现批量执行Sql文件
2021/10/05 SQL Server
python实现双向链表原理
2022/05/25 Python