Angular.js如何實現(xiàn)多個checkbox只能選擇一個
這篇文章給大家分享的是有關(guān)Angular.js如何實現(xiàn)多個checkbox只能選擇一個的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。
成都創(chuàng)新互聯(lián)公司于2013年開始，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項目成都網(wǎng)站建設(shè)、網(wǎng)站建設(shè)網(wǎng)站策劃，項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元固安做網(wǎng)站,已為上家服務(wù),為固安各地企業(yè)和個人服務(wù),聯(lián)系電話:13518219792
首先來看看效果
效果
實現(xiàn)這樣的效果，必須使用指令了，只有使用指令才能單獨控制每一個scope。
示例代碼如下：
請選擇文章主題色彩
(function () {
angular
.module("shishuoproject")
.directive("themeGroup",function(){
return{
controller: function () {
var scopeArray=[];
this.addScope= function (scope) {
var self=this;
scopeArray.push(scope);
scope.$on("$destory",function(){
self.removeScope(scope);
})
};
this.closeScope= function (scope) {
//var l=scopeArray.length;
angular.forEach(scopeArray, function (value) {
if(value!=scope){
value.flag=false;
}
})
};
this.removeScope= function (scope) {
var index=scopeArray.indexOf(scope);
if(index!==-1){
scopeArray.splice(index,1);
}
};
this.getIndex= function (scope) {
var index=scopeArray.indexOf(scope);
return index;
}
}
}
})
.directive("inputTheme",function(){
return{
restrict:'EA',
require:"^?themeGroup",
template:'',
replace:true,
scope:{},
link: function (scope,element,attr,themeCon) {
var colorArray=['#27c24c','#23b7e5','#7266ba',' #f05050'];
themeCon.addScope(scope);
scope.choseTheme= function () {
themeCon.closeScope(scope);
var index=themeCon.getIndex(scope);
var color=colorArray[index];
scope.$emit("getArticleThemeColor",{'color':color});
console.log(scope.flag);
};
}
}
})
})()這里簡單說一下，實現(xiàn)的主要思想就是，通過指令單獨生成scope，每一個指令都是一個單獨的scope，這樣每個ng-modal都獨立出來了，然后通過繼承一個總的指令來實現(xiàn)控制。
感謝各位的閱讀！關(guān)于“Angular.js如何實現(xiàn)多個checkbox只能選擇一個”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
本文標(biāo)題：Angular.js如何實現(xiàn)多個checkbox只能選擇一個
當(dāng)前網(wǎng)址：
http://weahome.cn/article/jpegsc.html
重慶分公司
重慶分公司
