angular.js - angularjs 如何用一組按鈕完成單選
問題描述
辛苦各位了,請問如何用一組按鈕來做單選的問題,萬分感謝!
如圖,需要做到2點:1、頁面加載后,根據(jù)傳回的值 domain:'8' ,設(shè)置默認(rèn)勾選的按鈕和按鈕里的圖標(biāo)class;2、點擊一個按鈕,清除其他按鈕樣式,并給點擊的按鈕添加 class active
效果圖如下(現(xiàn)在是直接用添加class形成的)
{ 1: '健康', 2: '法律', 3: '心理', 4: '醫(yī)美', 5: '教育', 6: '職場', 7: '汽修', 8: '其他'}HTML結(jié)構(gòu)如下(當(dāng)前是我寫的,但只能多選)
<ul class='tag-list button-select-group'> <li ng-repeat='item in domainList'> <button type='button' ng- ng-click='checkDomain($index+1)' ng-model='domain' value='{{$index+1}}'>{{item}}<span ng-class='{’fa fa-check-square’:$index + 1 == defaultDomain}'></span> </button></li></ul>JS如下
$scope.defaultDomain = data.domain;//服務(wù)器返回的domain字段數(shù)據(jù)$scope.checkDomain = function (id) {$scope.defaultDomain=id; }
問題解答
回答1:定義一個變量賦當(dāng)前value給他,然后在class做判斷,如果值=index就加上樣式
回答2:直接用radio形式來做,默認(rèn)樣式隱藏就好了,然后對對應(yīng)的label在樣式上做文章
相關(guān)文章:
1. mac里的docker如何命令行開啟呢?2. 關(guān)docker hub上有些鏡像的tag被標(biāo)記““This image has vulnerabilities””3. docker - 各位電腦上有多少個容器啊?容器一多,自己都搞混了,咋辦呢?4. 關(guān)于docker下的nginx壓力測試5. docker容器呢SSH為什么連不通呢?6. nignx - docker內(nèi)nginx 80端口被占用7. 如何解決Centos下Docker服務(wù)啟動無響應(yīng),且輸入docker命令無響應(yīng)?8. docker 下面創(chuàng)建的IMAGE 他們的 ID 一樣?這個是怎么回事????9. angular.js使用$resource服務(wù)把數(shù)據(jù)存入mongodb的問題。10. docker start -a dockername 老是卡住,什么情況?

網(wǎng)公網(wǎng)安備