AngularJs ng-change事件/指令的用法小结

2023-09-21 17:07:06 61

本文介绍了AngularJsng-change事件/指令的小结，分享给大家，也给自己留个笔记

定义和用法

ng-change指令用于告诉AngularJS在HTML元素值改变时需要执行的操作。

ng-change指令需要搭配ng-model指令使用。

AngularJSng-change指令指令不会覆盖原生的onchange事件,如果触发该事件，ng-change表达式与原生的onchange事件都会执行。

ng-change事件在值的每次改变时触发，它不需要等待一个完成的修改过程，或等待失去焦点的动作。

ng-change事件只针对输入框值的真实修改，而不是通过JavaScript来修改。

语法

,元素支持。</li> <li><radio>,<checkbox></li> </ol> <p>参数值</p> <p> <table> <tbody> <tr> <th>值</th> <th>描述</th> </tr> <tr> <td>expression</td> <td>元素值改变时执行表达式。</td> </tr> </tbody> </table> </p> <p>实例说明：当输入框的值改变时执行函数:<br/> </p> <pre> <bodyng-app="myApp"> <divng-controller="myCtrl"> <inputtype="text"ng-change="myFunc()"ng-model="myValue"/> <p>Theinputfieldhaschanged{{count}}times.</p> </div> <script> angular.module('myApp',[]) .controller('myCtrl',['$scope',function($scope){ $scope.count=0; $scope.myFunc=function(){ $scope.count++; }; }]); </script> </body> </pre> <p>实例说明，radio和checkbox</p> <p>注：checkboxng-model总是是true或false，而不是value，其他的ng-model默认都是value的值</p> <p>HTML</p> <pre> <h3>Radio控件测试</h3> <p><label> <inputtype="radio"value="男"name="sex"ng-model="value1"ng-change="radioChecked()"/> 男 </label> <label> <inputtype="radio"value="女"name="sex"ng-model="value1"ng-change="radioChecked()"/> 女 </label></p> <h3>checked控件测试</h3> <p><divclass="checkbox"> <label> <inputname="agree"type="checkbox"value="同意"ng-model="value2"ng-change="checkboxClick()"/> 同意协议 </label> </div> <divclass="checkbox"> <label> <inputname="agree"type="checkbox"value="同意2"ng-model="value2"ng-change="checkboxClick()"/> 同意协议2 </label> </div></p> </pre> <p>JS：</p> <pre> varapp=angular.module('myApp',[]); app.controller('validateCtrl',function($scope){ //randiong-change事件和原始onchange相同 //radiong-model的值是value $scope.radioChecked=function(){ console.info($scope.value1); } //checkboxng-change事件和原始onchange相同 //checkboxng-model总是是true或false $scope.checkboxClick=function(){ console.info($scope.value2); } }); </pre> <p>实例说明，text，select</p> <p>HTML</p> <pre> <formclass="form-horizontal"> <divclass="form-group"> <labelclass="control-label">姓名：</label> <inputtype="text"class="form-control"ng-model="name"ng-change="txtChange();"/> </div> <divclass="form-group"> <labelclass="control-label">选择年级：</label> <selectclass="form-control"ng-change="selectChange();"ng-model="grade"> <optionvalue="1">一年级</option> <optionvalue="2">二年级</option> </select> </div> </form> </pre> <p>JS</p> <pre> varapp=angular.module('myApp',[]); app.controller('validateCtrl',function($scope){ //textbox的ng-change事件和原始ng-change不相同，而是和$scope.$watch()监听相同 //textbox的ng-model为当前输入框的内容，为value值 $scope.txtChange=function(){ console.info($scope.name); } //select的ng-change事件和原始ng-change相同 //ng-model的默认情况下ng-model的结果为value值 $scope.selectChange=function(){ console.info($scope.grade); } }); </pre> <p>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。</p></section> </div> </div>  <nav> <span class="meta-nav"><a href="/article/223117.html" title="PHP栈的定义、入栈出栈方法及基于堆栈实现的计算器完整实例" se_prerender_url="complete">上一篇<br>PHP栈的定义、入栈出栈方法及基于堆栈实现的计算器完整实例</a></span> <span class="meta-nav"><a href="/article/223113.html" title="Laravel 5.4中migrate报错: Specified key was too long error的解决" se_prerender_url="complete">下一篇<br>Laravel 5.4中migrate报错: Specified key was too long error的解决</a></span> <div class="clear"></div> </nav>  <div class="article-recommend"> <h3>热门推荐</h3> <div class="title"><span class="s-1">1</span> <a href="/article/10835.html" title="毛坯房验收经验和常识看了之后再验房心里有底">毛坯房验收经验和常识看了之后再验房心里有底</a></div> <div class="title"><span class="s-2">2</span> <a href="/article/10697.html" title="二手房收房如何交接二手房收房注意问题">二手房收房如何交接二手房收房注意问题</a></div> <div class="title"><span class="s-3">3</span> <a href="/article/10605.html" title="专业验收毛坯房的价格商品房验收合格的标准">专业验收毛坯房的价格商品房验收合格的标准</a></div> <div class="title"><span class="s-4">4</span> <a href="/article/10568.html" title="精装房怎么验收精装房请验房师有用吗">精装房怎么验收精装房请验房师有用吗</a></div> <div class="title"><span class="s-5">5</span> <a href="/article/10567.html" title="一般要到哪里找验房师验房师有哪些作用呢">一般要到哪里找验房师验房师有哪些作用呢</a></div> <div class="title"><span class="s-6">6</span> <a href="/article/10566.html" title="请人验房一般是多少钱验房师费用是多少">请人验房一般是多少钱验房师费用是多少</a></div> <div class="title"><span class="s-7">7</span> <a href="/article/10553.html" title="怎样测量房子面积建筑面积和使用面积怎么算">怎样测量房子面积建筑面积和使用面积怎么算</a></div> <div class="title"><span class="s-8">8</span> <a href="/article/10550.html" title="收房需要注意什么仔细检查不松懈">收房需要注意什么仔细检查不松懈</a></div> <div class="title"><span class="s-9">9</span> <a href="/article/10548.html" title="收房时三书一证一表是什么主要作用介绍">收房时三书一证一表是什么主要作用介绍</a></div> <div class="title"><span class="s-10">10</span> <a href="/article/10547.html" title="交房时交房税费有哪些本文为你一一讲解">交房时交房税费有哪些本文为你一一讲解</a></div> <div class="title"><span class="s-11">11</span> <a href="/article/10526.html" title="验房都需要验什么要做哪些准备呢">验房都需要验什么要做哪些准备呢</a></div> <div class="title"><span class="s-12">12</span> <a href="/article/10525.html" title="毛坯房验房师有必要请吗毛坯房装修完如何验收">毛坯房验房师有必要请吗毛坯房装修完如何验收</a></div> <div class="title"><span class="s-13">13</span> <a href="/article/7820.html" title="地下室防水工程质量验收规范详解">地下室防水工程质量验收规范详解</a></div> <div class="title"><span class="s-14">14</span> <a href="/article/4947.html" title="水性涂料、油性涂料区别介绍">水性涂料、油性涂料区别介绍</a></div> <div class="title"><span class="s-15">15</span> <a href="/article/4517.html" title="零基础布艺DIY工坊教你做超萌猫头鹰钥匙包">零基础布艺DIY工坊教你做超萌猫头鹰钥匙包</a></div> <div class="title"><span class="s-16">16</span> <a href="/article/4438.html" title="三棵树漆怎么样？三棵树漆官方网站">三棵树漆怎么样？三棵树漆官方网站</a></div> <div class="title"><span class="s-17">17</span> <a href="/article/4258.html" title="家庭“装修套餐”中猫腻你知道吗？">家庭“装修套餐”中猫腻你知道吗？</a></div> <div class="title"><span class="s-18">18</span> <a href="/article/4051.html" title="小空间大浴望卫浴间装修巧支招">小空间大浴望卫浴间装修巧支招</a></div> </div> <div class="add-gg">  <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-4387516810452807" data-ad-slot="9131157744" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div>  <div id="sidebar"> <li class="sidebar-box"> <h3 class="widget-title">随机推荐</h3> <ul> <li> <a href="/article/4428.html" title="什么是博古架博古架怎么保养">什么是博古架博古架怎么保养</a> </li> <li> <a href="/article/4429.html" title="顾家沙发怎么样_顾家沙发图片">顾家沙发怎么样_顾家沙发图片</a> </li> <li> <a href="/article/4430.html" title="梳妆台的摆放技巧">梳妆台的摆放技巧</a> </li> <li> <a href="/article/4431.html" title="东鹏瓷砖怎么样？东鹏瓷砖官网价格表">东鹏瓷砖怎么样？东鹏瓷砖官网价格表</a> </li> <li> <a href="/article/4432.html" title="松木家具有什么优点">松木家具有什么优点</a> </li> <li> <a href="/article/4433.html" title="橱柜怎么样橱柜用户评价">橱柜怎么样橱柜用户评价</a> </li> <li> <a href="/article/4434.html" title="大开眼界阳台装修布置创意新想法">大开眼界阳台装修布置创意新想法</a> </li> <li> <a href="/article/4435.html" title="婴儿床选购的四个不宜事项">婴儿床选购的四个不宜事项</a> </li> <li> <a href="/article/4436.html" title="省钱省事装修法则实用实惠又简单">省钱省事装修法则实用实惠又简单</a> </li> <li> <a href="/article/4437.html" title="玄关的颜色搭配技巧">玄关的颜色搭配技巧</a> </li> <li> <a href="/article/4438.html" title="三棵树漆怎么样？三棵树漆官方网站">三棵树漆怎么样？三棵树漆官方网站</a> </li> <li> <a href="/article/4439.html" title="选购复式楼梯扶手的注意事项">选购复式楼梯扶手的注意事项</a> </li> <li> <a href="/article/4440.html" title="美丽新空间让飘窗变成舒服床">美丽新空间让飘窗变成舒服床</a> </li> <li> <a href="/article/4441.html" title="盼盼防盗门质量怎么样盼盼防盗门品牌介绍">盼盼防盗门质量怎么样盼盼防盗门品牌介绍</a> </li> <li> <a href="/article/4442.html" title="阁楼装修拒绝空间鸡肋超级赞">阁楼装修拒绝空间鸡肋超级赞</a> </li> <li> <a href="/article/4443.html" title="家装新趋势：先买家具后装修">家装新趋势：先买家具后装修</a> </li> </ul> </li> <li class="sidebar-box">  <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-4387516810452807" data-ad-slot="8604338277" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </li> </div> </div> </div> <ul class="suspend"> <li class="back-top" onclick="backTop()"> <i class="fa fa-chevron-up"></i> <span class="more">返回顶部</span> </li> <li> <a href="http://wpa.qq.com/msgrd?v=3&uin=514930285&site=qq&menu=yes"> <i class="fa fa-qq"></i> <span class="more">514930285</span> </a> </li> <li> <a href="mailto:czq8825@qq.com"> <i class="fa fa-envelope"></i> <span class="more">czq8825@qq.com</span> </a> </li>  </ul> <footer class="footer clearfix"> <p>免责声明：网站资源来源于网络，如有侵权，请及时联系删除。</p> <p>Copyright © 2024 <a href="/">好资源导航网</a>. All Rights Reserved.</p> <p> <a href="https://beian.miit.gov.cn">蜀ICP备2021004611号-4</a> <a href="/sitemap.html">网站地图</a> <script> !function(p){"use strict";!function(t){var s=window,e=document,i=p,c="".concat("https:"===e.location.protocol?"https://":"http://","sdk.51.la/js-sdk-pro.min.js"),n=e.createElement("script"),r=e.getElementsByTagName("script")[0];n.type="text/javascript",n.setAttribute("charset","UTF-8"),n.async=!0,n.src=c,n.id="LA_COLLECT",i.d=n;var o=function(){s.LA.ids.push(i)};s.LA?s.LA.ids&&o():(s.LA=p,s.LA.ids=[],o()),r.parentNode.insertBefore(n,r)}()}({id:"JkYxq0Tbzm6jhVv6",ck:"JkYxq0Tbzm6jhVv6"}); </script> </p> </footer> <script src="/Public/Home/js/main.js"></script> <script type="text/javascript" src="/Public/Home/js/z_stat.js"></script> </body> </html>