使用AngularJS編寫多選按鈕選中時觸發(fā)指定方法的指令代碼詳解
更新時間：2017年07月24日 11:03:12 投稿：mrr
最近做項目時遇到了需要用到多選按鈕選中觸發(fā)事件的功能，小編試著手寫一個指令，具體實現(xiàn)代碼大家參考下本文吧
最近在做項目時，遇到了需要用到多選按鈕選中觸發(fā)事件的功能，因此我查找了一下AngularJS的提供的指令，但是沒有發(fā)現(xiàn)相應(yīng)的指令。而一個看起來很像的指令就是ng-checked，但是這個指令是用來代替標簽里面checked屬性的，所以也用不了。因此我就自己動手試著寫一個這樣的指令，相應(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編寫多選按鈕選中時觸發(fā)指定方法的指令代碼詳解，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
單頁應(yīng)用中，組件時構(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實現(xiàn)圖片上傳及縮略圖展示示例
本篇文章主要介紹了通過AngularJS實現(xiàn)圖片上傳及縮略圖展示，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-01-01
這篇文章主要介紹了angular強制更新ui視圖的實現(xiàn)方法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
本文介紹了AngularJS 多指令Scope問題的解決，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-10-10
這篇文章主要為大家介紹了angular內(nèi)容投影，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-12-12
本文的主要是演示 Template-driven 中，一些常用控件的使用方式，僅供參考。具體請根據(jù)實際業(yè)務(wù)需求做相應(yīng)調(diào)整。2017-06-06
angular2實現(xiàn)統(tǒng)一的http請求頭方法
今天小編就為大家分享一篇angular2實現(xiàn)統(tǒng)一的http請求頭方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
本文通過實例代碼給大家介紹了angularJS 打開新的標簽頁方法，代碼簡單易懂，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2017-09-09
簡單來說Angular.js是google開發(fā)者設(shè)計和開發(fā)的一套前端開發(fā)框架，幫助你簡化前端開發(fā)的負擔(dān)。當(dāng)然，這里有很多其它的前端開發(fā)框架，但是如何選擇合適的前端框架對于我們這些開發(fā)人員來說就不是那么容易了！2014-11-11