怎么在Angular中使用ng-change事件

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

成都创新互联公司于2013年成立，先为富源等服务建站，富源等地企业，进行企业商务咨询服务。为富源企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。

定义和用法

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><trl><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> <br> 名称栏目：怎么在Angular中使用ng-change事件 <br> 网站链接：<a href="https://jylskj.cn/article/pdgogc.html">https://jylskj.cn/article/pdgogc.html</a> </div> </div> <div class="other"> <h3>其他资讯</h3> <ul> <li> <a href="/article/shccsh.html">前任3短视频营销,短视频营销存在的问题及对策</a> </li><li> <a href="/article/dssogsp.html">html5线条,html5线条颜色</a> </li><li> <a href="/article/dieijip.html">jquery鼠标画直线 jquery鼠标经过变色</a> </li><li> <a href="/article/dgcciih.html">linux退出翻页命令 linux快速返回桌面</a> </li><li> <a href="/article/dgcpjhp.html">ios开发ipad旋转 ipad旋转控制在哪里</a> </li><li> <a href="/article/dgjiiis.html">css样式奇偶数 css奇数偶数</a> </li><li> <a href="/article/dpdiooc.html">Linux系统为什么要吃掉我的“内存”</a> </li><li> <a href="/article/dpgdsio.html">ovim编辑器简介 (linux中的ne)</a> </li><li> <a href="/article/dphspsp.html">html如何让字体闪</a> </li><li> <a href="/article/codhhcs.html">解读VisualStudio2010图文控件</a> </li> </ul> </div> </div> <footer> <div class="message"> <div class="mess container"> <p>免费获取网站建设与品牌策划方案报价</p> <span>*主要业务范围包括：高端网站建设，集团网站建设(网站建设网站制作)找网站建设公司就上四川简阳网站建设。</span> <form action=""> <input type="text" class="ipt1" placeholder="联系人"> <input type="text" class="ipt2" placeholder="联系电话"> <textarea name="" id="" placeholder="内容描述：描述您的需求，如网站、微信、电商、APP等。"> 提交需求

联系我们

028-86922220

手机：13518219792
地址：成都市简阳市大华国际财富中心2号楼
24小时服务热线：18982081108

网站建设服务

网站推广服务

网站运维服务

微信二维码

微信二维码

友情链接：成都标牌标识牌制作公司昆明家电一站式服务昆明钛合金镜架成都发电机租赁配电房监控系统犀浦门窗定制 scxhyhdbf.cn 德阳柴油发电机维修成都网站设计大悟县实木电视柜

网站建设知识

怎么在Angular中使用ng-change事件

联系我们

网站建设服务

网站推广服务

网站运维服务

FOLLOW US