怎么在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> 分享URL：<a href="http://azwzsj.com/article/dcjdpg.html">http://azwzsj.com/article/dcjdpg.html</a> </div> </div> <div class="contentr fr"> <h3>其他资讯</h3> <ul> <li> <a href="/article/iohsc.html">如何使用Pandas和Numpy按时间戳将数据以Groupby方式分组-创新互联</a> </li><li> <a href="/article/idoge.html">使用PHP怎么实现一个跨站刷票功能-创新互联</a> </li><li> <a href="/article/idoje.html">计算机中CPU风扇的性能分析-创新互联</a> </li><li> <a href="/article/idocp.html">rrdtutorial-创新互联</a> </li><li> <a href="/article/idoid.html">怎么利用java对文件名进行修改-创新互联</a> </li> </ul> </div> </div> </div>  <footer> <div class="foot"> <div class="container"> <h1>阿坝州建站您身边的网站建设服务商</h1> <div class="foot1"> <ul> <li> <dl><i class="iconfont"></i><b>地址ADDRESS</b></dl> <p>四川-阿坝州青羊区太升南路288号<br> 锦天国际A座10楼 </p> </li> <li> <dl><i class="iconfont"></i><b>电话/TEL</b></dl> <p><a href="tel:02886922220" target="_blank">028 86922220</a> (工作日)<br> <a href="tel:18980820575" target="_blank">1898082 0575</a> ( 7x24 ) </p> </li> <li> <dl><i class="iconfont"></i><b>QQ咨询</b></dl> <p> 244261566 (售前)<br> 631063699 (售后) </p> </li> <li> <dl><i class="iconfont"></i><b>邮箱/E: mail</b></dl> <p> service@cdcxhl.com (业务)<br> hr@cdcxhl.com (求职) </p> </li> </ul> </div> <div class="link"> 友情链接： <a href="http://www.cdzunge.cn/" title="尊格展览" target="_blank">尊格展览</a> <a href="http://www.cxjianzhan.cn/fwxm/yingxiao.html" title="营销型网站建设" target="_blank">营销型网站建设</a> <a href="http://www.ghjhjc.com.cn/" title="广汉锦华" target="_blank">广汉锦华</a> <a href="http://www.scgaoxian.com/" title="高县网站建设" target="_blank">高县网站建设</a> <a href="http://www.cxhljz.cn/" title="成都网站制作" target="_blank">成都网站制作</a> <a href="http://www.cdkjz.cn/develop/" title="网上商城开发" target="_blank">网上商城开发</a> <a href="http://www.75091.cn/" title="德信企业管理" target="_blank">德信企业管理</a> <a href="http://seo.cdkjz.cn/quanwang/" title="全网整合营销" target="_blank">全网整合营销</a> <a href="https://www.cdcxhl.com/xiaochengx.html" title="小程序开发" target="_blank">小程序开发</a> <a href="http://m.cdcxhl.cn/H5/ " title="响应式网站建设" target="_blank">响应式网站建设</a> </div> </div> </div> <div class="copy container"> Copyright © 2024 All Rights Reserved. 四川阿坝州网站建设公司版权所有 <a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">蜀ICP备2024099935号-3 </a> [原创设计,独立版权。未经许可.不得拷贝或镜像]<br> <a href="http://www.kswsj.cn/" target="_blank">网站营销推广</a> | <a href="https://www.cdcxhl.com/pinpai.html" target="_blank">品牌网站设计</a> | <a href="http://www.cdweb.net/" target="_blank">自适应网站建设</a> | <a href="http://cdkjz.cn/wangzhan/pinpai/" target="_blank">品牌网站建设</a> | <a href="http://chengdu.cdxwcx.cn/" target="_blank">成都网站制作</a> | <a href="https://www.cdcxhl.com/cloud/" target="_blank">云服务器</a> | <a href="https://www.cdcxhl.com/weihu/jiangan.html" target="_blank">阿坝州网站维护</a> | (阿坝州网站建设QQ : 631063699 )</div> </footer>  <div class="fot"> <ul> <li> <a href="mqqwpa://im/chat?chat_type=wpa&uin=532337155&version=1&src_type=web&web_src=oicqzone.com" target="_blank"> <img src="/Public/Home/img/fot1.png" alt="建站咨询"> <p>在线咨询</p> </a> </li> <li> <a href="tel:18980820575" target="_blank"> <img src="/Public/Home/img/fot2.png" alt="建站电话"> <p>拨打电话</p> </a> </li> </ul> </div> </body> </html> <script> $(".con 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>