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

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

定义和用法

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

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

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

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

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

语法

1. , , 和  元素支持。</li> <li>,</li> </ol> <p>参数值</p> <table> <tbody> <tr> <th>值</th> <th>描述</th> </tr> <tr> <td>expression</td> <td>元素值改变时执行表达式。</td> </tr> </tbody> </table> <p>实例说明：当输入框的值改变时执行函数:</p> <div class="gaodaimacode"> <pre class="prettyprint linenums"> <div> <p>The input field has changed {{count}} times.</p></div></pre> </div> <p>实例说明，radio和checkbox</p> <p>注：checkbox ng-model总是是true或false，而不是value，其他的ng-model默认都是value 的值</p> <p>HTML</p> <div class="gaodaimacode"> <pre class="prettyprint linenums"> <h3>Radio 控件测试</h3><p><label> 男 </label><label> 女 </label></p><h3>checked 控件测试</h3><p><div class="checkbox"> <label> 同意协议 </label></div><div class="checkbox"> <label> 同意协议2 </label></div></p></pre> </div> <p>JS：</p> <div class="gaodaimacode"> <pre class="prettyprint linenums"> var app = angular.module('myApp', []); app.controller('validateCtrl', function ($scope) { //randio ng-change事件和原始onchange相同 //radio ng-model 的值是value $scope.radioChecked = function () { console.info($scope.value1); } //checkbox ng-change事件和原始onchange相同 //checkbox ng-model总是是true或false $scope.checkboxClick = function () { console.info($scope.value2); } }); </pre> </div> <p>实例说明，text，select</p> <p>HTML</p> <div class="gaodaimacode"> <pre class="prettyprint linenums"> <div class="form-group"> <label class="control-label">姓名：</label></div><div class="form-group"> <label class="control-label">选择年级：</label> 一年级二年级</div></pre> </div> <p>JS</p> <div class="gaodaimacode"> <pre class="prettyprint linenums"> var app = angular.module('myApp', []); app.controller('validateCtrl', function ($scope) { //textbox <i style="color:transparent">来源gaodai$ma#com搞$代*码网</i>的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> </div> </div> <p>以上就是AngularJs ng-change事件/指令的用法小结的详细内容，更多请关注<a href="https://www.gaodaima.com/go.html?url=http://www.gaodaima.com" rel="nofollow" >gaodaima搞代码网</a>其它相关文章！</p> <hr /><div class="open-message">搞代码网（<a href="www.gaodaima.com" target="_blank" title="gaodaima.com">gaodaima.com</a>）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱<a>chengxuyuan@gaodaima.com‍</a>，我们会在看到邮件的第一时间内为您处理，或直接联系<a>QQ：872152909</a>。本网站采用<a href="https://www.gaodaima.com/go.html?url=http://creativecommons.org/licenses/by-nc-sa/3.0/" rel="nofollow" target="_blank" title="BY-NC-SA授权协议">BY-NC-SA</a>协议进行授权 <br >转载请注明原文链接：<a href="https://www.gaodaima.com/74537.html" target="_blank" title="AngularJs ng-change事件/指令的用法小结">AngularJs ng-change事件/指令的用法小结</a><a id="spreadAds" target="_blank" href="" onclick="spreadAds()"></a><a id="spreadAds2" target="_blank" href=""></a> </div> </p> <div class="article-social"> <a href="javascript:;" data-action="ding" data-id="74537" id="Addlike" class="action"><i class="fa fa-heart-o"></i>喜欢 (<span class="count">0</span>)</a><span class="or"><style>.article-social .weixin:hover{background:#fff;}</style><a class="weixin" style="border-bottom:0px;font-size:15pt;cursor:pointer;">赏<div class="weixin-popover"><div class="popover bottom in"><div class="arrow"></div><div class="popover-title"><center>[搞代码]</center></div><div class="popover-content"><img width="200px" height="200px" src="http://www.gaodaima.com/wp-content/uploads/hai_AliPay.png" ></div></div></div></a></span><span class="action action-share bdsharebuttonbox"><i class="fa fa-share-alt"></i>分享 (<span class="bds_count" data-cmd="count" title="累计分享0次">0</span>)<div class="action-popover"><div class="popover top in"><div class="arrow"></div><div class="popover-content"><a href="#" class="sinaweibo fa fa-weibo" data-cmd="tsina" title="分享到新浪微博"></a><a href="#" class="bds_qzone fa fa-star" data-cmd="qzone" title="分享到QQ空间"></a><a href="#" class="qq fa fa-qq" data-cmd="sqq" title="分享到QQ好友"></a><a href="#" class="bds_renren fa fa-renren" data-cmd="renren" title="分享到人人网"></a><a href="#" class="bds_weixin fa fa-weixin" data-cmd="weixin" title="分享到微信"></a><a href="#" class="bds_more fa fa-ellipsis-h" data-cmd="more"></a></div></div></div></span></div> </article> <footer class="article-footer"> </footer> <nav class="article-nav"><div class="_d13vl98i0pw"></div><script type="text/javascript"> (window.slotbydup = window.slotbydup || []).push({ id: "u6795176", container: "_d13vl98i0pw", async: true });</script> </nav><div id="donatecoffee" style="overflow:auto;display:none;"><img width="400" height="400" alt="支持作者一杯咖啡" src="http://www.gaodaima.com/wp-content/uploads/hai_AliPay.png"></div> <div class="related_top"> <div class="related_posts"><ul class="related_img"> <li class="related_box" > <a href="https://www.gaodaima.com/75299.html" title="Angular是什么框架" target="_blank"><img class="thumb" style="width:185px;height:110px" data-original="https://www.gaodaima.com/wp-content/themes/Git-alpha/timthumb.php?src=https://www.gaodaima.com/wp-content/themes/Git-alpha/assets/img/pic/9.jpg&h=110&w=185&q=90&zc=1&ct=1" alt="Angular是什么框架" /><br><span class="r_title">Angular是什么框架</span></a> </li> <li class="related_box" > <a href="https://www.gaodaima.com/75298.html" title="angular和angularjs有什么区别" target="_blank"><img class="thumb" style="width:185px;height:110px" data-original="https://www.gaodaima.com/wp-content/themes/Git-alpha/timthumb.php?src=https://www.gaodaima.com/wp-content/themes/Git-alpha/assets/img/pic/2.jpg&h=110&w=185&q=90&zc=1&ct=1" alt="angular和angularjs有什么区别" /><br><span class="r_title">angular和angularjs有什么区别</span></a> </li> <li class="related_box" > <a href="https://www.gaodaima.com/75297.html" title="什么是angular依赖注入" target="_blank"><img class="thumb" style="width:185px;height:110px" data-original="https://www.gaodaima.com/wp-content/themes/Git-alpha/timthumb.php?src=https://www.gaodaima.com/wp-content/themes/Git-alpha/assets/img/pic/3.jpg&h=110&w=185&q=90&zc=1&ct=1" alt="什么是angular依赖注入" /><br><span class="r_title">什么是angular依赖注入</span></a> </li> <li class="related_box" > <a href="https://www.gaodaima.com/75295.html" title="Angular中di是什么" target="_blank"><img class="thumb" style="width:185px;height:110px" data-original="https://www.gaodaima.com/wp-content/themes/Git-alpha/timthumb.php?src=https://www.gaodaima.com/wp-content/themes/Git-alpha/assets/img/pic/3.jpg&h=110&w=185&q=90&zc=1&ct=1" alt="Angular中di是什么" /><br><span class="r_title">Angular中di是什么</span></a> </li> </ul><div class="relates"><div class="_mw9fz31sqco"></div><script type="text/javascript"> (window.slotbydup = window.slotbydup || []).push({ id: "u6795180", container: "_mw9fz31sqco", async: true });</script><ul><li><i class="fa fa-minus"></i><a target="_blank" href="https://www.gaodaima.com/75299.html">Angular是什么框架</a></li><li><i class="fa fa-minus"></i><a target="_blank" href="https://www.gaodaima.com/75298.html">angular和angularjs有什么区别</a></li><li><i class="fa fa-minus"></i><a target="_blank" href="https://www.gaodaima.com/75297.html">什么是angular依赖注入</a></li><li><i class="fa fa-minus"></i><a target="_blank" href="https://www.gaodaima.com/75295.html">Angular中di是什么</a></li><li><i class="fa fa-minus"></i><a target="_blank" href="https://www.gaodaima.com/75296.html">Angular怎么判断字符串是否为空?</a></li><li><i class="fa fa-minus"></i><a target="_blank" href="https://www.gaodaima.com/75294.html">Angular2是什么</a></li><li><i class="fa fa-minus"></i><a target="_blank" href="https://www.gaodaima.com/75292.html">Angular和ionic是什么</a></li><li><i class="fa fa-minus"></i><a target="_blank" href="https://www.gaodaima.com/75293.html">Angular CLI是什么意思</a></li></ul></div></div> </div> <div id="comment-ad" class="banner banner-related"><div class="_9madbukio7r"></div><script type="text/javascript"> (window.slotbydup = window.slotbydup || []).push({ id: "u6677406", container: "_9madbukio7r", async: true });</script><!-- 多条广告如下脚本只需引入一次 --><script type="text/javascript" src="//cpro.baidustatic.com/cpro/ui/cm.js" async="async" defer="defer" ></script></div> <div id="respond" class="no_webshot"> <form action="https://www.gaodaima.com/asdloie8574asdqwexzxdqwertasdqwe.php" method="post" id="commentform"> <div class="comt-title"> <div class="comt-avatar pull-left"> <img src="https://cdn.v2ex.com/gravatar/?s=50" class="avatar avatar-108"> </div> <div class="comt-author pull-left"> 发表我的评论 </div> <a id="cancel-comment-reply-link" class="pull-right" href="javascript:;">取消评论</a> </div> <div class="comt"> <div class="comt-box"> <textarea placeholder="说点什么吧…" class="input-block-level comt-area" name="comment" id="comment" cols="100%" rows="3" tabindex="1" onkeydown="if(event.ctrlKey&&event.keyCode==13){document.getElementById('submit').click();return false};">
   提交评论

   评论通知

   表情 贴图 加粗 删除线 居中 斜体 签到