AngularJS基础 ng-model 指令详解及示例代码

AngularJS ng-model 指令

AngularJS 实例

绑定输入框的值到 scope 变量中：

input 输入框的值绑定了变量 "name" :
{{name}}





该实例演示了如何使用 ng-model 指令绑定输入框的值到 scope 变量中。

定义和用法

ng-model 指令绑定了 HTML 表单元素到 scope 变量中。

如果 scope 中不存在变量, 将会创建它。

语法

, <select>, , 元素支持该指令。</p><p style="TEXT-INDENT: 2em"> </p> <p style="TEXT-INDENT: 2em">参数值</p> <p style="TEXT-INDENT: 2em"> <th>值</th> <th>描述</th> separator 你想要绑定到表单域的属性名。 </p> <p style="TEXT-INDENT: 2em">以上就是对AngularJS ng-model资料的整理，后续继续补充相关资料。</p></div> <div class="prev-next"> <div class="prev">上一篇：<a href="/noclass/item-21942.html">jquery 判断selection range 是否在容器中的简单实例</a></div><div class="next">下一篇：<a href="/noclass/item-21937.html">Windows自带截图工具在截图后无法另存图片怎么解决?</a></div> </div> </div> <!--广告 start--> <div class="qf-ads"><ul class="qf-ads-nUl-12"><li><a href="" target="_blank"><img src="/uploads/images/ads/202306/20230610084915300842.jpg"></a><a href="" target="_blank" class="alink"><label>广告</label><span>商业广告，理性选择</span></a></li></ul></div> <div class="qf-article-container"> <div class="qf-cms-name"> <h3>相关推荐</h3> </div> <div class="qf-cms-container"> <ul class="article-list-relationship"> <li><a href="/noclass/item-17103.html" title="4555555555555555454" target="_blank">4555555555555555454</a> </li> <li><a href="/noclass/item-17068.html" title="aspnet_admin.exe进程是安全的吗 aspnet_admin进程信息查询" target="_blank">aspnet_admin.exe进程是安全的吗 aspnet_admin进程信息查询</a> </li> <li><a href="/noclass/item-15886.html" title="make_sock: could not bind to address 0.0.0.0:443" target="_blank">make_sock: could not bind to address 0.0.0.0:443</a> </li> <li><a href="/noclass/item-15820.html" title="用软件lm_sensors监测Linux系统和CPU温度" target="_blank">用软件lm_sensors监测Linux系统和CPU温度</a> </li> <li><a href="/noclass/item-14913.html" title="教你SQLSERVER扩展存储过程XP_CMDSHELL的简单应用" target="_blank">教你SQLSERVER扩展存储过程XP_CMDSHELL的简单应用</a> </li> <li><a href="/noclass/item-14893.html" title="教你如何用ISAPI_Rewrite做IIS防盗链" target="_blank">教你如何用ISAPI_Rewrite做IIS防盗链</a> </li> <li><a href="/noclass/item-14837.html" title="桌面文件丢失怎么办？找回桌面文件的妙招" target="_blank">桌面文件丢失怎么办？找回桌面文件的妙招</a> </li> <li><a href="/noclass/item-14743.html" title="电脑中如何将耳机和扬声器设为独立音源" target="_blank">电脑中如何将耳机和扬声器设为独立音源</a> </li> <li><a href="/noclass/item-14373.html" title="ubuntu下删除或卸载easy_install所安装的软件包" target="_blank">ubuntu下删除或卸载easy_install所安装的软件包</a> </li> <li><a href="/noclass/item-14371.html" title="Debian/Ubuntu下安装Apache的Mod_Rewrite模块的步骤分享" target="_blank">Debian/Ubuntu下安装Apache的Mod_Rewrite模块的步骤分享</a> </li> <li><a href="/noclass/item-13338.html" title="如何使用命令查看电脑生产日期" target="_blank">如何使用命令查看电脑生产日期</a> </li> <li><a href="/noclass/item-13224.html" title="windows扬声器被禁用了怎么办" target="_blank">windows扬声器被禁用了怎么办</a> </li> <li><a href="/noclass/item-13072.html" title="Vsftpd+tcp_wrappers控制主机和用户访问" target="_blank">Vsftpd+tcp_wrappers控制主机和用户访问</a> </li> <li><a href="/noclass/item-13012.html" title="Centos 6.5 x86_64 安装或者设置花生壳ddns的技巧" target="_blank">Centos 6.5 x86_64 安装或者设置花生壳ddns的技巧</a> </li> <li><a href="/noclass/item-12722.html" title="e_srcv03.exe是什么进程 e_srcv03进程是安全程序吗" target="_blank">e_srcv03.exe是什么进程 e_srcv03进程是安全程序吗</a> </li> <li><a href="/noclass/item-12720.html" title="e_s0hic1.exe是什么进程 e_s0hic1进程安全吗" target="_blank">e_s0hic1.exe是什么进程 e_s0hic1进程安全吗</a> </li> <li><a href="/noclass/item-12670.html" title="vi_grm.exe进程是什么意思" target="_blank">vi_grm.exe进程是什么意思</a> </li> <li><a href="/noclass/item-11912.html" title="Windows7/2008中批量删除隧道适配器的方法" target="_blank">Windows7/2008中批量删除隧道适配器的方法</a> </li> <li><a href="/noclass/item-11854.html" title="走进Vista系统安全中心!" target="_blank">走进Vista系统安全中心!</a> </li> <li><a href="/noclass/item-11852.html" title="让Vista响应更快" target="_blank">让Vista响应更快</a> </li> </ul> </div> </div> </div> <div class="sidebar"> <!--广告 start--> <div class="qf-ads"><ul class="qf-ads-nUl-9"><li><a href="https://www.aliyun.com/activity/new/index?userCode=6qkxlezw" target="_blank"><img src="/uploads/images/ads/202306/20230609231605989299.jpg"></a><a href="https://www.aliyun.com/activity/new/index?userCode=6qkxlezw" target="_blank" class="alink"><label>广告</label><span>商业广告，理性选择</span></a></li></ul></div> <div class="qf-cms-name"> <h3>文章分类</h3> </div> <div class="qf-cms-container"> <div class="qf-category-list"> <a href="/wangzhanshengming.html" title="免责声明" target="_blank">免责声明</a> <a href="/contact.html" title="联系我们" target="_blank">联系我们</a> <a href="/aboutus.html" title="关于我们" target="_blank">关于我们</a> <a href="/guanggaohezuo.html" title="广告合作" target="_blank">广告合作</a> <a href="/computers/index.html" title="电脑相关" target="_blank">电脑相关</a> <a href="/mobile/index.html" title="手机学院" target="_blank">手机学院</a> <a href="/programming/index.html" title="网络编程" target="_blank">网络编程</a> <a href="/database/index.html" title="数据库" target="_blank">数据库</a> <a href="/system/index.html" title="操作系统" target="_blank">操作系统</a> <a href="/design/index.html" title="平面设计" target="_blank">平面设计</a> <a href="/yunying/index.html" title="网站运营" target="_blank">网站运营</a> <a href="/security/index.html" title="网络安全" target="_blank">网络安全</a> </div> </div> <div class="qf-cms-name"> <h3>热门关键词</h3> </div> <div class="qf-cms-container"> <div class="qf-tag-list"> <a href="https://zhannei.baidu.com/cse/site?q=雪佛兰&cc=fuphp.cn&ie=utf-8" title="雪佛兰" target="_blank">雪佛兰</a> <a href="https://zhannei.baidu.com/cse/site?q=通用&cc=fuphp.cn&ie=utf-8" title="通用" target="_blank">通用</a> <a href="https://zhannei.baidu.com/cse/site?q=奢华&cc=fuphp.cn&ie=utf-8" title="奢华" target="_blank">奢华</a> <a href="https://zhannei.baidu.com/cse/site?q=劳斯莱斯&cc=fuphp.cn&ie=utf-8" title="劳斯莱斯" target="_blank">劳斯莱斯</a> <a href="https://zhannei.baidu.com/cse/site?q=旗舰版&cc=fuphp.cn&ie=utf-8" title="旗舰版" target="_blank">旗舰版</a> <a href="https://zhannei.baidu.com/cse/site?q=64位&cc=fuphp.cn&ie=utf-8" title="64位" target="_blank">64位</a> <a href="https://zhannei.baidu.com/cse/site?q=收藏夹&cc=fuphp.cn&ie=utf-8" title="收藏夹" target="_blank">收藏夹</a> <a href="https://zhannei.baidu.com/cse/site?q=解调器&cc=fuphp.cn&ie=utf-8" title="解调器" target="_blank">解调器</a> <a href="https://zhannei.baidu.com/cse/site?q=网卡&cc=fuphp.cn&ie=utf-8" title="网卡" target="_blank">网卡</a> <a href="https://zhannei.baidu.com/cse/site?q=网线&cc=fuphp.cn&ie=utf-8" title="网线" target="_blank">网线</a> <a href="https://zhannei.baidu.com/cse/site?q=分辨率&cc=fuphp.cn&ie=utf-8" title="分辨率" target="_blank">分辨率</a> <a href="https://zhannei.baidu.com/cse/site?q=家电&cc=fuphp.cn&ie=utf-8" title="家电" target="_blank">家电</a> <a href="https://zhannei.baidu.com/cse/site?q=4k&cc=fuphp.cn&ie=utf-8" title="4k" target="_blank">4k</a> <a href="https://zhannei.baidu.com/cse/site?q=显示器&cc=fuphp.cn&ie=utf-8" title="显示器" target="_blank">显示器</a> <a href="https://zhannei.baidu.com/cse/site?q=header&cc=fuphp.cn&ie=utf-8" title="header" target="_blank">header</a> <a href="https://zhannei.baidu.com/cse/site?q=USER_AGENT&cc=fuphp.cn&ie=utf-8" title="USER_AGENT" target="_blank">USER_AGENT</a> <a href="https://zhannei.baidu.com/cse/site?q=色彩&cc=fuphp.cn&ie=utf-8" title="色彩" target="_blank">色彩</a> <a href="https://zhannei.baidu.com/cse/site?q=图形&cc=fuphp.cn&ie=utf-8" title="图形" target="_blank">图形</a> <a href="https://zhannei.baidu.com/cse/site?q=商业&cc=fuphp.cn&ie=utf-8" title="商业" target="_blank">商业</a> <a href="https://zhannei.baidu.com/cse/site?q=生成&cc=fuphp.cn&ie=utf-8" title="生成" target="_blank">生成</a> </div> </div> <!--广告 start--> <div class="qf-ads"><ul class="qf-ads-nUl-10"><li><a href="https://www.aliyun.com/activity/new/index?userCode=6qkxlezw" target="_blank"><img src="/uploads/images/ads/202306/20230609231537994005.jpg"></a><a href="https://www.aliyun.com/activity/new/index?userCode=6qkxlezw" target="_blank" class="alink"><label>广告</label><span>商业广告，理性选择</span></a></li></ul></div> <div class="qf-cms-name"> <h3>热门文章</h3> </div> <div class="qf-cms-container"> <ul class="qf-article-list"> <li><em>1</em> <a href="/cehua/item-29482.html" title="什么是Meta标签？ 哪些Meta标签对搜索引擎SEO优化有作用？" target="_blank">什么是Meta标签？ 哪些Meta标签对搜索引擎SEO优化有作用？</a> </li> <li><em>2</em> <a href="/mac/item-22368.html" title="Mac设置VPN来登录youtube等国外网站的步骤" target="_blank">Mac设置VPN来登录youtube等国外网站的步骤</a> </li> <li><em>3</em> <a href="/jingyan/item-20869.html" title="各大搜索引擎登录入口,网站收录入口" target="_blank">各大搜索引擎登录入口,网站收录入口</a> </li> <li><em>4</em> <a href="/qilin/item-30816.html" title="Openvpn在麒麟操作系统上的配置方法" target="_blank">Openvpn在麒麟操作系统上的配置方法</a> </li> <li><em>5</em> <a href="/bios/item-23598.html" title="联想笔记本BIOS设置图解中文详细说明" target="_blank">联想笔记本BIOS设置图解中文详细说明</a> </li> <li><em>6</em> <a href="/bios/item-27940.html" title="AMI BIOS设置图解教程+Award Bios设置全程图解" target="_blank">AMI BIOS设置图解教程+Award Bios设置全程图解</a> </li> <li><em>7</em> <a href="/mac/item-23040.html" title="Mac怎么切换主显示器 苹果电脑Mac双显示器设置主显方法图解" target="_blank">Mac怎么切换主显示器 苹果电脑Mac双显示器设置主显方法图解</a> </li> <li><em>8</em> <a href="/yunying/other/item-29261.html" title="分享最受美国人喜欢的十大搜索引擎" target="_blank">分享最受美国人喜欢的十大搜索引擎</a> </li> <li><em>9</em> <a href="/tools/item-30528.html" title="分享10个常见的SQL注入工具" target="_blank">分享10个常见的SQL注入工具</a> </li> <li><em>10</em> <a href="/mac/item-23628.html" title="mac系统中自带的邮件程序怎么添加qq邮箱帐号?" target="_blank">mac系统中自带的邮件程序怎么添加qq邮箱帐号?</a> </li> </ul> </div> <div class="qf-cms-name"> <h3>最新更新</h3> </div> <div class="qf-cms-container"> <ul class="qf-article-list"> <li><a href="/changshi/item-79334.html" title="无线路由器经常断线 故障解决" target="_blank">无线路由器经常断线 故障解决</a> </li> <li><a href="/changshi/item-79351.html" title="怎么在Mac上设置锁屏不待机" target="_blank">怎么在Mac上设置锁屏不待机</a> </li> <li><a href="/changshi/item-79354.html" title="VHD和VHDX硬盘格式有什么区别?" target="_blank">VHD和VHDX硬盘格式有什么区别?</a> </li> <li><a href="/changshi/item-79363.html" title="关闭Aero Shake节约系统资源的方法" target="_blank">关闭Aero Shake节约系统资源的方法</a> </li> <li><a href="/changshi/item-79362.html" title="怎么更改Mac中的邮件字体大小" target="_blank">怎么更改Mac中的邮件字体大小</a> </li> <li><a href="/changshi/item-79371.html" title="提高WIN7系统开机速度方法分享" target="_blank">提高WIN7系统开机速度方法分享</a> </li> <li><a href="/changshi/item-79361.html" title="Mac系统怎么更改用户登录密码" target="_blank">Mac系统怎么更改用户登录密码</a> </li> <li><a href="/changshi/item-79358.html" title="Mac上如何修改时间和日期" target="_blank">Mac上如何修改时间和日期</a> </li> <li><a href="/changshi/item-79366.html" title="如何将常用应用固定至开始屏幕或任务栏" target="_blank">如何将常用应用固定至开始屏幕或任务栏</a> </li> <li><a href="/mysql/item-79372.html" title="MySQL中replace into语句的用法详解（insert into 的增强版）" target="_blank">MySQL中replace into语句的用法详解（insert into 的增强版）</a> </li> </ul> </div> <!--广告 start--> <div class="qf-ads qf-ads-ontop"><ul class="qf-ads-nUl-11"><li><a href="http://www.hnqfu.cn" target="_blank"><img src="/uploads/images/ads/202306/20230610081510415263.jpg"></a><a href="http://www.hnqfu.cn" target="_blank" class="alink"><label>广告</label><span>商业广告，理性选择</span></a></li></ul></div> </div> </div> </div> <script type="text/javascript"> var scrollPh = 1680; layui.use('code', function(){ layui.code({ elem: 'pre', title: '代码', encode: false, ln: true, //skin: 'dark', //about: '123', about: [ //'<a href="javascript:;">复制</a>' ] }); }); </script> <div class="wrap bottom"> <div class="wrapper clearfix"> <div class="links"> <a href="http://www.fuphp.cn">网站首页</a> 　|　<a href="/aboutus.html">关于我们</a> 　|　<a href="/wangzhanshengming.html">免责声明</a> 　|　<a href="/guanggaohezuo.html">广告合作</a> 　|　<a href="/contact.html">联系我们</a> </div> <div class="copyright"> Copyright @ 2015-2024 <a href="" title="河南全福网络科技有限公司专业网制设计制作，PHP二次开发">福编程 fuphp</a> All Rights Reserved. </div> <div class="copyright"> <a href="http://beian.miit.gov.cn" target="_blank" rel="nofollow">豫ICP备15036959号-4</a> </div> </div> </div> <script type="text/javascript"> layui.config({ base: '/static/js/layuiadmin/' //静态资源所在路径 }).extend({ qf: '../qfplus/qf/qf', contact: '../qfplus/contact/contact', }).use(['contact'], function(){ var contact = layui.contact; contact.render({'position': 'left', 'oappend':'.qf-quick-bar'}); //菜单 jQuery(".submenu").slide({ type:"menu",// 效果类型，针对菜单/导航而引入的参数（默认slide） titCell:".nLi", //鼠标触发对象 targetCell:".sub", //titCell里面包含的要显示/消失的对象 titOnClassName:'current', effect:"slideDown", //targetCell下拉效果 delayTime:300 , //效果时间 triggerTime:0, //鼠标延迟触发时间（默认150） returnDefault:true //鼠标移走后返回默认状态，例如默认频道是“预告片”，鼠标移走后会返回“预告片”（默认false） }); //表单 var form = layui.form; form.render(null, 'component-form'); /* 监听提交 */ form.on('submit(component-form-submit)', function(data){ var searchkey = data.field.searchkey; return true; }); //滚动固顶 $(document).scroll(function(){ var sTop = $(document).scrollTop(); if( sTop >= scrollPh ){ $('.qf-ads-ontop').css({'position':'fixed', 'top':'0'}); }else{ $('.qf-ads-ontop').css({'position':'relative'}); } }); }); <!--百度统计------------------> </script> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?9eb8fd7c57fefc4283caaf6d0c7e37f7"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </body> </html>