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异步上传文件插件ajaxFileUpload详细介绍
May 19 Javascript
jQuery中 prop() attr()使用详解
May 19 Javascript
JavaScript变量的作用域全解析
Aug 14 Javascript
jQuery+CSS实现一个侧滑导航菜单代码
May 09 Javascript
AngularJS select设置默认值的实现方法
Aug 25 Javascript
BootStrap实现文件上传并带有进度条效果
Sep 11 Javascript
深入理解Node.js中通用基础设计模式
Sep 19 Javascript
利用node 判断打开的是文件 还是 文件夹的实例
Jun 10 Javascript
JS异步处理的进化史深入讲解
Aug 25 Javascript
node爬取新型冠状病毒的疫情实时动态
Feb 06 Javascript
JS面向对象编程——ES6 中class的继承用法详解
Mar 03 Javascript
React自定义hook的方法
Jun 25 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.NET的入门教程
2006/10/09 PHP
用php实现的下载css文件中的图片的代码
2010/02/08 PHP
PHP生成随机字符串(3种方法)
2015/09/25 PHP
php使用include 和require引入文件的区别
2017/02/16 PHP
再谈Yii Framework框架中的事件event原理与应用
2020/04/07 PHP
xml分页+ajax请求数据源+dom取结果实例代码
2008/10/31 Javascript
基于jquery的DIV随滚动条滚动而滚动的代码
2012/07/20 Javascript
一个简单的JS时间控件示例代码(JS时分秒时间控件)
2013/11/22 Javascript
jQuery前端开发35个小技巧
2016/05/24 Javascript
AngularJS入门教程之多视图切换用法示例
2016/11/02 Javascript
jquery获取table指定行和列的数据方法(当前选中行、列)
2016/11/07 Javascript
js自定义QQ菜单效果
2017/01/10 Javascript
js实现微博发布小功能
2017/01/12 Javascript
vue实现简单实时汇率计算功能
2017/01/15 Javascript
详谈$.data()的用法和作用
2017/02/13 Javascript
js实现水平滚动菜单导航
2017/07/21 Javascript
javaScript 连接打印机,打印小票的实例
2017/12/29 Javascript
基于vue-cli vue-router搭建底部导航栏移动前端项目
2018/02/28 Javascript
利用百度echarts实现图表功能简单入门示例【附源码下载】
2019/06/10 Javascript
vue 使用高德地图vue-amap组件过程解析
2019/09/07 Javascript
Angular封装表单控件及思想总结
2019/12/11 Javascript
[01:10:03]OG vs EG 2018国际邀请赛淘汰赛BO3 第三场 8.23
2018/08/24 DOTA
Tensorflow读取并输出已保存模型的权重数值方式
2020/01/04 Python
websocket+sockjs+stompjs详解及实例代码
2018/11/30 HTML / CSS
html5 Canvas画图教程(1)—画图的基本常识
2013/01/09 HTML / CSS
GetYourGuide台湾:预订旅游活动、景点和旅游项目
2019/06/10 全球购物
捷克母婴用品购物网站:Feedo.cz
2020/12/28 全球购物
System.Array.CopyTo()和System.Array.Clone()有什么区别
2016/06/20 面试题
先进事迹报告会感言
2014/01/24 职场文书
幼儿园母亲节活动方案
2014/03/10 职场文书
大龄毕业生求职别忘职业规划
2014/03/11 职场文书
工会换届选举方案
2014/05/21 职场文书
先进工作者个人总结
2015/02/15 职场文书
2019年健身俱乐部的创业计划书
2019/08/26 职场文书
学习师德师风的心得体会(2篇)
2019/10/08 职场文书
导游词之任弼时故居
2020/01/07 职场文书