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

本篇文章主要介绍了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 来修改。

语法

, 元素支持。</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><div class="jb51code"><pre class="brush:php;toolbar:false"> <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></body></pre></div><p>实例说明，radio和checkbox</p><p>注：checkbox ng-model总是是true或false，而不是value，其他的ng-model默认都是value 的值</p><p>HTML</p><div class="jb51code"><pre class="brush:php;toolbar:false"> <h3>Radio 控件测试</h3><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><h3>checked 控件测试</h3><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></div><p>JS：</p><div class="jb51code"><pre class="brush:js;"> 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="jb51code"><pre class="brush:php;toolbar:false"> <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></div><p>JS</p><div class="jb51code"><pre class="brush:js;"> 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></div><p></p></div><p>以上就是AngularJs ng-change事件/指令的用法小结的详细内容，更多请关注易知道|edz.cc其它相关文章！</p></article> <script> window.onload=function(){ var imgs = document.getElementsByTagName('img'); for(var i = 0;imgs[i];i++){ var thttp = imgs[i].getAttribute('src').indexOf("http"); var tok = imgs[i].getAttribute('src').indexOf("//"); if(thttp == -1 || tok == -1) {imgs[i].setAttribute('src', 'https://www.ezd.cc' + (imgs[i].getAttribute('src') || ''));} } } </script> <div class="entry-meta"> <div class="articleinfo-tag"><i class="iconfont icon-biaoqian"></i><a href="/tags/shijian2.html" title="事件" class="c1" target="_blank">事件</a><a href="/tags/zhiling.html" title="指令" class="c1" target="_blank">指令</a><a href="/tags/yihe.html" title="义和" class="c1" target="_blank">义和</a><a href="/tags/fenxiang.html" title="分享" class="c1" target="_blank">分享</a><a href="/tags/cankao.html" title="参考" class="c1" target="_blank">参考</a></div> </div> </div> <div class="relatebox"> <div class="relatebox-lists"> <h3>推荐阅读<span></span></h3> <div class="relatebox-articles"> <ul> <article class="excerpt excerpt-one"> <p class="focuss"><a href="/zs/Lc3n.html" class="thumbnail"><span><img class="thumb" src="https://www.gonglue1.com/static/img/no/78.webp" alt="怎么把电脑显卡清灰分享|显卡清灰教程" /></span></a></p> <div class="title"> <h2><a href="/zs/Lc3n.html" title="怎么把电脑显卡清灰分享|显卡清灰教程">怎么把电脑显卡清灰分享|显卡清灰教程</a></h2> </div> <p class="text-muted meta">怎么把电脑显卡清灰分享|显卡清灰教程，，1. 显卡清灰教程1.首先右击鼠标,点击计算机选项,然后选择属性选项。2.接下来点击高级系统设置选项</p> </article><article class="excerpt excerpt-one"> <p class="focuss"><a href="/zs/LcwX.html" class="thumbnail"><span><img class="thumb" src="https://www.gonglue1.com/static/img/no/78.webp" alt="这种配置还不知道。它主要用于日常学习和娱乐，偶尔玩游戏。" /></span></a></p> <div class="title"> <h2><a href="/zs/LcwX.html" title="这种配置还不知道。它主要用于日常学习和娱乐，偶尔玩游戏。">这种配置还不知道。它主要用于日常学习和娱</a></h2> </div> <p class="text-muted meta">这种配置还不知道。它主要用于日常学习和娱乐，偶尔玩游戏。，，CPU英特尔奔腾双核E6300 580 主板技嘉ga-ep43-es3g（启。1）599 金士顿2GB DDR2</p> </article><article class="excerpt excerpt-one"> <p class="focuss"><a href="/zs/Lctp.html" class="thumbnail"><span><img class="thumb" src="https://www.gonglue1.com/static/img/no/97.webp" alt="2010年底DIY硬件总结和安装参考" /></span></a></p> <div class="title"> <h2><a href="/zs/Lctp.html" title="2010年底DIY硬件总结和安装参考">2010年底DIY硬件总结和安装参考</a></h2> </div> <p class="text-muted meta">2010年底DIY硬件总结和安装参考，，它似乎只是一眨眼的功夫从过去的最后一眼。看看现在的岗位似乎就在昨天，但看看当年的内容是真的走了，如果</p> </article><article class="excerpt excerpt-one"> <p class="focuss"><a href="/zs/Lcqt.html" class="thumbnail"><span><img class="thumb" src="https://www.gonglue1.com/static/img/no/11.webp" alt="虾类安装经验分享！" /></span></a></p> <div class="title"> <h2><a href="/zs/Lcqt.html" title="虾类安装经验分享！">虾类安装经验分享！</a></h2> </div> <p class="text-muted meta">虾类安装经验分享！，，虾类安装经验分享： 1，机箱的电源光盘应该接近代理价格，而内存和硬盘的价格是在互联网上找到的即时价格。主板套件，视频卡</p> </article><article class="excerpt excerpt-one"> <p class="focuss"><a href="/zs/Lcnm.html" class="thumbnail"><span><img class="thumb" src="https://www.gonglue1.com/static/img/no/75.webp" alt="Windows电脑申请iOS证书教程及工具分享" /></span></a></p> <div class="title"> <h2><a href="/zs/Lcnm.html" title="Windows电脑申请iOS证书教程及工具分享">Windows电脑申请iOS证书教程及工具分享</a></h2> </div> <p class="text-muted meta">Windows电脑申请iOS证书教程及工具分享，证书,文件，首先介绍下常用苹果iOS证书的常用类型iOS Development:iOS开发证书（用于真机调试测试）iOS</p> </article><article class="excerpt excerpt-one"> <p class="focuss"><a href="/zs/LcjU.html" class="thumbnail"><span><img class="thumb" src="https://www.gonglue1.com/static/img/no/36.webp" alt="该0x7c84c3e3指令通过计算机0x6ea000引用内存错误" /></span></a></p> <div class="title"> <h2><a href="/zs/LcjU.html" title="该0x7c84c3e3指令通过计算机0x6ea000引用内存错误">该0x7c84c3e3指令通过计算机0x6ea000引用内</a></h2> </div> <p class="text-muted meta">该0x7c84c3e3指令通过计算机0x6ea000引用内存错误，，今天，电脑爱好者QQ群问了网友一个问题，比如群友。当电脑浏览网页，他们经常弹出：0x7c84c3e3</p> </article><article class="excerpt excerpt-one"> <p class="focuss"><a href="/zs/Lch4.html" class="thumbnail"><span><img class="thumb" src="https://www.gonglue1.com/static/img/no/51.webp" alt="确定java按钮响应事件的代码" /></span></a></p> <div class="title"> <h2><a href="/zs/Lch4.html" title="确定java按钮响应事件的代码">确定java按钮响应事件的代码</a></h2> </div> <p class="text-muted meta">确定java按钮响应事件的代码，，* 阅读本文可以结合最后在java登录窗口界面下面是一个链接。是定义的容器。容器（CP =得到内容面板）； / /</p> </article><article class="excerpt excerpt-one"> <p class="focuss"><a href="/zs/LbX3.html" class="thumbnail"><span><img class="thumb" src="https://www.gonglue1.com/static/img/no/54.webp" alt="月光博客声讨百度百科，百度文库侵权，不适用于避风港原则。" /></span></a></p> <div class="title"> <h2><a href="/zs/LbX3.html" title="月光博客声讨百度百科，百度文库侵权，不适用于避风港原则。">月光博客声讨百度百科，百度文库侵权，不适用于</a></h2> </div> <p class="text-muted meta">月光博客声讨百度百科，百度文库侵权，不适用于避风港原则。，，一年一次的消费者权益保护日，贾平凹，韩寒，郭敬明，李承鹏和其他50位作家共同声讨百度</p> </article><article class="excerpt excerpt-one"> <p class="focuss"><a href="/zs/LbSc.html" class="thumbnail"><span><img class="thumb" src="https://www.gonglue1.com/static/img/no/52.webp" alt="为什么我的电脑开机出现id和cp|电脑重启的事件ID是什么" /></span></a></p> <div class="title"> <h2><a href="/zs/LbSc.html" title="为什么我的电脑开机出现id和cp|电脑重启的事件ID是什么">为什么我的电脑开机出现id和cp|电脑重启的</a></h2> </div> <p class="text-muted meta">为什么我的电脑开机出现id和cp|电脑重启的事件ID是什么，，1. 电脑重启的事件ID是什么这个ID6008只是记录系统异常，不含有其它信息，你遇到的自</p> </article><article class="excerpt excerpt-one"> <p class="focuss"><a href="/zs/LbLJ.html" class="thumbnail"><span><img class="thumb" src="https://www.gonglue1.com/static/img/no/72.webp" alt="新建参考线快捷键|新建参考线快捷键Mac电脑" /></span></a></p> <div class="title"> <h2><a href="/zs/LbLJ.html" title="新建参考线快捷键|新建参考线快捷键Mac电脑">新建参考线快捷键|新建参考线快捷键Mac电脑</a></h2> </div> <p class="text-muted meta">新建参考线快捷键|新建参考线快捷键Mac电脑，，新建参考线快捷键Mac电脑ps前景色填充快捷键是Alt+Delete。1、打开ps，点击新建，创建2、点击左</p> </article><article class="excerpt excerpt-one"> <p class="focuss"><a href="/zs/LbKs.html" class="thumbnail"><span><img class="thumb" src="https://www.gonglue1.com/static/img/no/51.webp" alt="设置白天指令|切换白天模式的指令" /></span></a></p> <div class="title"> <h2><a href="/zs/LbKs.html" title="设置白天指令|切换白天模式的指令">设置白天指令|切换白天模式的指令</a></h2> </div> <p class="text-muted meta">设置白天指令|切换白天模式的指令，，1. 切换白天模式的指令泰拉瑞亚的白天想要挑强调调就是时间，想要调到白天的话，第一个你要去点击设置当中</p> </article><article class="excerpt excerpt-one"> <p class="focuss"><a href="/zs/LbIk.html" class="thumbnail"><span><img class="thumb" src="https://www.gonglue1.com/static/img/no/66.webp" alt="creo重复指令快捷键|creo如何重复上一操作" /></span></a></p> <div class="title"> <h2><a href="/zs/LbIk.html" title="creo重复指令快捷键|creo如何重复上一操作">creo重复指令快捷键|creo如何重复上一操作</a></h2> </div> <p class="text-muted meta">creo重复指令快捷键|creo如何重复上一操作，，1. creo如何重复上一操作注释，使用引线注释就可以啦，至于你问题标题，自动bom球标，那是先要有带有</p> </article><article class="excerpt excerpt-one"> <p class="focuss"><a href="/zs/LbFr.html" class="thumbnail"><span><img class="thumb" src="https://www.gonglue1.com/static/img/no/81.webp" alt="csgo高手快捷键|csgo快捷键指令" /></span></a></p> <div class="title"> <h2><a href="/zs/LbFr.html" title="csgo高手快捷键|csgo快捷键指令">csgo高手快捷键|csgo快捷键指令</a></h2> </div> <p class="text-muted meta">csgo高手快捷键|csgo快捷键指令，，1. csgo快捷键指令反恐精英全球攻势游戏中，死亡竞赛的回合时间60分钟：mp_roundtime 60，休闲/竞技模式的每局</p> </article><article class="excerpt excerpt-one"> <p class="focuss"><a href="/zs/LbAE.html" class="thumbnail"><span><img class="thumb" src="https://www.gonglue1.com/static/img/no/37.webp" alt="JS动态添加的标签无法绑定事件解决方案~~~" /></span></a></p> <div class="title"> <h2><a href="/zs/LbAE.html" title="JS动态添加的标签无法绑定事件解决方案~~~">JS动态添加的标签无法绑定事件解决方案~~~</a></h2> </div> <p class="text-muted meta">JS动态添加的标签无法绑定事件解决方案~~~，标签,动态，今天用ajax实现动态插入数据时发现监听一直不起作用，一样的代码，非动态的就可以监听实</p> </article><article class="excerpt excerpt-one"> <p class="focuss"><a href="/zs/LbAi.html" class="thumbnail"><span><img class="thumb" src="https://www.gonglue1.com/static/img/no/58.webp" alt="90后瓶门事件图片" /></span></a></p> <div class="title"> <h2><a href="/zs/LbAi.html" title="90后瓶门事件图片">90后瓶门事件图片</a></h2> </div> <p class="text-muted meta">90后瓶门事件图片，，现在孩子们还太早，有些女孩子总是在门口等一会儿，最近发生了一次酒瓶门事件。近日，山东一家寄宿学校的一名女生带着一瓶</p> </article></ul> </div> </div> </div> </div> </div> <footer class="footer"> <p>Copyright © 2023 易知道 ezd.cc All Rights Reserved</p> <p><a href="https://beian.miit.gov.cn/">京ICP备19020253号-3</a></p> </footer> </body> </html>