快捷導(dǎo)航

使用AngularJS編寫多選按鈕選中時(shí)觸發(fā)指定方法的指令代碼詳解

更新時(shí)間：2017年07月24日 11:03:12 投稿：mrr

最近做項(xiàng)目時(shí)遇到了需要用到多選按鈕選中觸發(fā)事件的功能，小編試著手寫一個(gè)指令，具體實(shí)現(xiàn)代碼大家參考下本文吧

最近在做項(xiàng)目時(shí)，遇到了需要用到多選按鈕選中觸發(fā)事件的功能，因此我查找了一下AngularJS的提供的指令，但是沒有發(fā)現(xiàn)相應(yīng)的指令。而一個(gè)看起來很像的指令就是ng-checked，但是這個(gè)指令是用來代替標(biāo)簽里面checked屬性的，所以也用不了。因此我就自己動(dòng)手試著寫一個(gè)這樣的指令，相應(yīng)的代碼如下：

<form name="test_form" ng-controller="TestCtrl">
<input type="checkbox" name="a" ng-model="a" id="check" ng-checking="say()"/>
<label for="check">{{ a }}</label>
</form>
var app = angular.module('Demo',[]);
app.directive('ngChecking',function(){
var fun1 = function(element,attrs){
return function(scope,iElement,iAttrs){
scope.$watch('a',function(){
if(iElement[0].checked){
if(iAttrs['ngChecking']){   
var fun = iAttrs['ngChecking'].match(/\w+()/g);
scope[fun[0]]();
}
}
})
}
}
return {
compile:fun1,
restrict:'AE'
}
})
app.controller('TestCtrl',function($scope){
$scope.say = function(){
alert(123)
}
});
angular.bootstrap(document,['Demo']);

總結(jié)

以上所述是小編給大家介紹的使用AngularJS編寫多選按鈕選中時(shí)觸發(fā)指定方法的指令代碼詳解，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

詳解Angular之路由基礎(chǔ)
單頁應(yīng)用中，組件時(shí)構(gòu)建應(yīng)用的基礎(chǔ)元素，頁面展示什么內(nèi)容均是靠頁面有什么組件決定的，而展示什么組件又是由一組路由（帶有Url元素的特定集合，可用于導(dǎo)航視圖）決定的，希望本文可以幫助讀者了解路由的基礎(chǔ)概念和基礎(chǔ)使用、寫法。
2021-05-05
AngularJS constant和value區(qū)別詳解
angularJS可以通過constant(name,value)和value(name,value)對于創(chuàng)建服務(wù)也是很重要的。他們之間有什么不同呢？今天小編給大家分享AngularJS constant和value區(qū)別詳解，需要的朋友參考下
2017-02-02
通過AngularJS實(shí)現(xiàn)圖片上傳及縮略圖展示示例
本篇文章主要介紹了通過AngularJS實(shí)現(xiàn)圖片上傳及縮略圖展示，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-01-01
angular強(qiáng)制更新ui視圖的實(shí)現(xiàn)方法
這篇文章主要介紹了angular強(qiáng)制更新ui視圖的實(shí)現(xiàn)方法，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-03-03
AngularJS 多指令Scope問題的解決
本文介紹了AngularJS 多指令Scope問題的解決，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-10-10
angular內(nèi)容投影詳解
這篇文章主要為大家介紹了angular內(nèi)容投影，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
2021-12-12
Angular 表單控件示例代碼
本文的主要是演示 Template-driven 中，一些常用控件的使用方式，僅供參考。具體請根據(jù)實(shí)際業(yè)務(wù)需求做相應(yīng)調(diào)整。
2017-06-06
angular2實(shí)現(xiàn)統(tǒng)一的http請求頭方法
今天小編就為大家分享一篇angular2實(shí)現(xiàn)統(tǒng)一的http請求頭方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-08-08
AngularJS 打開新的標(biāo)簽頁實(shí)現(xiàn)代碼
本文通過實(shí)例代碼給大家介紹了angularJS 打開新的標(biāo)簽頁方法，代碼簡單易懂，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧
2017-09-09
讓angularjs支持瀏覽器自動(dòng)填表
簡單來說Angular.js是google開發(fā)者設(shè)計(jì)和開發(fā)的一套前端開發(fā)框架，幫助你簡化前端開發(fā)的負(fù)擔(dān)。當(dāng)然，這里有很多其它的前端開發(fā)框架，但是如何選擇合適的前端框架對于我們這些開發(fā)人員來說就不是那么容易了！
2014-11-11