怎么在Angular中使用ng-change事件-创新互联

这篇文章给大家介绍怎么在Angular中使用ng-change事件，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。

创新互联是一家集网站建设,辰溪企业网站建设,辰溪品牌网站建设,网站定制,辰溪网站建设报价,网络营销,网络优化,辰溪网站推广为一体的创新建站企业，帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿，时刻以成就客户成长自我，坚持不断学习、思考、沉淀、净化自己，让我们为更多的企业打造出实用型网站。

定义和用法

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

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

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

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

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

语法

, 元素支持。</p></li><li><p><radio>,<checkbox></p></li></ol><p>参数值</p><table><tbody><tr><th>值</th><th>描述</th></tr><tr><td>expression</td><td>元素值改变时执行表达式。</td></tr></tbody></table><p>实例说明：当输入框的值改变时执行函数:</p><pre><body ng-app="myApp"> <div ng-controller="myCtrl"> <input type="text" ng-change="myFunc()" ng-model="myValue" /> <p>The input field has changed {{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>注：checkbox ng-model总是是true或false，而不是value，其他的ng-model默认都是value 的值</p><p>HTML</p><pre><h4>Radio 控件测试</h4> <p><label> <input type="radio" value="男" name="sex" ng-model="value1" ng-change="radioChecked()" /> 男 </label> <label> <input type="radio" value="女" name="sex" ng-model="value1" ng-change="radioChecked()" /> 女 </label></p> <h4>checked 控件测试</h4> <p><div class="checkbox"> <label> <input name="agree" type="checkbox" value="同意" ng-model="value2" ng-change="checkboxClick()" /> 同意协议 </label> </div> <div class="checkbox"> <label> <input name="agree" type="checkbox" value="同意2" ng-model="value2" ng-change="checkboxClick()" /> 同意协议2 </label> </div></p></pre><p>JS：</p><pre>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><p>实例说明，text，select</p><p>HTML</p><pre><form class="form-horizontal"> <div class="form-group"> <label class="control-label">姓名：</label> <input type="text" class="form-control" ng-model="name" ng-change="txtChange();" /> </div> <div class="form-group"> <label class="control-label">选择年级：</label> <select class="form-control" ng-change="selectChange();" ng-model="grade"> <option value="1">一年级</option> <option value="2">二年级</option> </select> </div> </form></pre><p>JS</p><pre>var app = 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>关于怎么在Angular中使用ng-change事件就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。</p><p align=center>另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、<a href="https://www.cdcxhl.com/gaofang/" target="_blank">高防服务器</a>、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。</p> <br> 网站题目：怎么在Angular中使用ng-change事件-创新互联 <br> 转载来于：<a href="http://kswjz.com/article/dcjdpg.html">http://kswjz.com/article/dcjdpg.html</a> </div> <div class="view-qrocde cl"> <div class="m z"><img src="/Public/Home/images/ew.jpg"/></div> <div class="text"> <h6>扫二维码与项目经理沟通</h6> <p>我们在微信上24小时期待你的声音</p> <p>解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流</p> </div> </div> <div class="othernews cl"> <h3>其他资讯</h3> <ul> <li><a href="/article/ehsesh.html">如何注册免费企业邮箱，公司需要一个免费的企业邮箱怎么注册</a></li><li><a href="/article/ehsego.html">网页设计网站开发需要什么，做网站建设都需要提供哪些相关资料</a></li><li><a href="/article/ehsejd.html">营业执照线上怎么申请app,线上申请营业执照流程</a></li><li><a href="/article/ehseis.html">域名权限是指什么,域名系统com指什么</a></li><li><a href="/article/ehsejg.html">怎么查中文域名的ip,域名解析方法:先挂号中文域名再解析</a></li> </ul> </div> </div> </div> <div class="sidebar"> <div class="tuijian"> <a href="#"> <h2 class="cl"><span>行业动态</span></h2> <h3>企业网站建设的重要性！</h3> <p>现在虽然是移动互联网时代，但企业网站依然重要，包含PC站点，移动站。可以说企业网站关系企业的未来发展和前途，尤其对中小企业更是如此，一些中小企业老板，对自己的名片很在乎，因为这是个门面。...</p> </a> </div> <div class="ser sidesub"> <h2>服务项目</h2> <ul class="ebox"> <li class="sub sub-1"> <div> <h3>网站建设</h3> <p></p> <a class="btn" href="/serve/website/">查看详情</a> </div> </li> <li class="sub sub-1"> <div> <h3>移动端/APP</h3> <p></p> <a class="btn" href="/serve/moblie/">查看详情</a> </div> </li> <li class="sub sub-1"> <div> <h3>微信/小程序</h3> <p></p> <a class="btn" href="/serve/small/">查看详情</a> </div> </li> <li class="sub sub-1"> <div> <h3>技术支持</h3> <p></p> <a class="btn" href="/serve/tech/">查看详情</a> </div> </li> <li class="sub sub-1"> <div> <h3>其它服务</h3> <p></p> <a class="btn" href="/serve/othe/">查看详情</a> </div> </li> <li class="sub sub-5"> <div> <h3>更多服务项目</h3> <p> <a>用我们的专业和诚信赢得您的信赖，从PC到移动互联网均有您想要的服务！</a></p> <a class="btn" href="/serve/">获取更多</a> </div> </li> </ul> </div> <div class="contact" id="fix"> <h2 class="cl"> <span>联系吧</span> <a href="https://map.baidu.com/" class="ditu" rel="nofollow" target="_blank">在百度地图上找到我们</a> </h2> <h3>电话：13518219792</h3> <p>如遇占线或暂未接听请拨：136xxx98888</p> <div class="qq"> <a href="//wpa.qq.com/msgrd?v=3&uin=244261566&site=qq&menu=yes" rel="nofollow" target="_blank">业务咨询</a> <a href="//wpa.qq.com/msgrd?v=3&uin=244261566&site=qq&menu=yes" rel="nofollow" target="_blank">技术咨询</a> <a href="//wpa.qq.com/msgrd?v=3&uin=244261566&site=qq&menu=yes" rel="nofollow" target="_blank">售后服务</a> </div> </div> </div> <script> //固定滚动 (function () { var oDiv = document.getElementById("fix"); var H = 120, iE6; var Y = oDiv; while (Y) { H += Y.offsetTop; Y = Y.offsetParent }; iE6 = window.ActiveXObject && !window.XMLHttpRequest; if (!iE6) { window.onscroll = function () { var s = document.body.scrollTop || document.documentElement.scrollTop; if (s > H) { oDiv.className = "contact fixed"; if (iE6) { oDiv.style.top = (s - H) + "px"; } } else { oDiv.className = "contact "; } }; } })(); </script> </div> <div class="footer"> <div class="wp"> <div class="wpss cl"> <dl class="about"> <dt>网站设计</dt> <dd><a href="http://www.cxhljz.cn/" target="_blank" title="成都网站设计">成都网站设计</a></dd><dd><a href="http://www.cdkjz.cn/fangan/waimao/" target="_blank" title="外贸网站设计方案">外贸网站设计方案</a></dd><dd><a href="http://www.kswcd.cn/" target="_blank" title="成都网站设计制作公司">成都网站设计制作公司</a></dd><dd><a href="http://www.cdxwcx.cn/sheji/" target="_blank" title="成都网站设计">成都网站设计</a></dd> </dl> <dl class="about"> <dt>网站制作</dt> <dd><a href="http://www.mywzjz.com/" target="_blank" title="绵阳网站制作公司">绵阳网站制作公司</a></dd><dd><a href="http://m.cdcxhl.cn/mobile/" target="_blank" title="手机网站制作">手机网站制作</a></dd><dd><a href="http://www.wjzwz.com/" target="_blank" title="温江网站制作">温江网站制作</a></dd><dd><a href="http://www.cdkjz.cn/" target="_blank" title="成都网站制作">成都网站制作</a></dd> </dl> <dl class="contact"> <dt>联系我们</dt> <dd>电话：13518219792</dd> <dd>邮箱：631063699@qq.com</dd> <dd>地址：成都青羊区锦天国际1002号</dd> <dd>网址：www.kswjz.com</dd> </dl> <dl class="about" style="margin-left:50px;width:235px;"> <dt>网站建设</dt> <dd><a href="http://m.cdcxhl.cn/seo/" target="_blank" title="营销网站建设">营销网站建设</a></dd><dd><a href="http://www.ncwzjz.com/" target="_blank" title="南充网站建设">南充网站建设</a></dd><dd><a href="https://www.cdxwcx.com/wangzhan/" target="_blank" title="成都网站建设">成都网站建设</a></dd><dd><a href="http://chengdu.cdcxhl.cn/jianshe/" target="_blank" title="成都网站建设公司">成都网站建设公司</a></dd> </dl> <dl class="flow"> <dt></dt> <div class="ma cl"> <div class="m"> <img src="/Public/Home/images/ew.jpg" /> <p>微信二维码</p> </div> </div> </dl> </div> </div> <div class="footer-link wp"> <ul class="wpss cl"> <li class="fisrt">友情链接</li> <li><a href="http://m.xwcx.net/phone/" title="手机网站版本" target="_blank">手机网站版本</a></li><li><a href="https://www.cdcxhl.com/sosuo.html" title="网站搜索引擎优化" target="_blank">网站搜索引擎优化</a></li><li><a href="http://www.cdxwcx.cn/tuoguan/neijiang.html" title="内江托管服务器" target="_blank">内江托管服务器</a></li><li><a href="http://www.myzwz.com/" title="绵阳网站建设" target="_blank">绵阳网站建设</a></li><li><a href="http://www.cdsjymy.cn/" title="路面机械及配件" target="_blank">路面机械及配件</a></li><li><a href="http://www.cxjianzhan.com/seo/" title="seo关键词优化" target="_blank">seo关键词优化</a></li><li><a href="http://www.gawzjs.com/" title="广安网站建设" target="_blank">广安网站建设</a></li><li><a href="http://m.cdxwcx.com/xibuxinxi.html" title="西部信息机房" target="_blank">西部信息机房</a></li><li><a href="http://www.4006tel.net/yingxiao/" title="网络营销" target="_blank">网络营销</a></li><li><a href="http://www.lzhejiang.com/" title="合江网站建设" target="_blank">合江网站建设</a></li> </ul> </div> </div> <div class="bot-footer"> <div class="wp"> <p class="wpss"> <em>Copyright © 2002-2023 www.kswjz.com 快上网建站品牌 QQ：244261566 版权所有</em> <em>备案号：<a href="http://beian.miit.gov.cn/" rel="external nofollow">蜀ICP备19037934号</a></em> </p> <p class="wpss" style="line-height:30px !important;"> </p> </div> </div> <div class="footer-kefu"> <ul> <li class="qq"><a href="https://wpa.qq.com/msgrd?v=3&uin=244261566&site=qq&menu=yes"><em></em>在线咨询</a> </li> <li class="tel"><a href="tel:13518219792" target="_blank"><em></em>13518219792</a></li> <li class="wx"> <em></em> <div class="code"> <img src="/Public/Home/images/ew.jpg" /> <p>微信二维码</p> </div> </li> <li class="m"> <em></em> <div class="code"> <img src="/Public/Home/images/ew.jpg" /> <p>移动版官网</p> </div> </li> <li class="top"><em></em></li> </ul> </div> <script src="/Public/Home/js/all.js"></script> </body> </html> <script> $(".cont img").each(function(){ var src = $(this).attr("src"); //获取图片地址 var str=new RegExp("http"); var result=str.test(src); if(result==false){ var url = "https://www.cdcxhl.com"+src; //绝对路径 $(this).attr("src",url); } }); window.onload=function(){ document.oncontextmenu=function(){ return false; } } </script>