angular.js - angularjs 如何用一組按鈕完成單選
問題描述
辛苦各位了,請問如何用一組按鈕來做單選的問題,萬分感謝!
如圖,需要做到2點:1、頁面加載后,根據傳回的值 domain:'8' ,設置默認勾選的按鈕和按鈕里的圖標class;2、點擊一個按鈕,清除其他按鈕樣式,并給點擊的按鈕添加 class active
效果圖如下(現在是直接用添加class形成的)
{ 1: '健康', 2: '法律', 3: '心理', 4: '醫美', 5: '教育', 6: '職場', 7: '汽修', 8: '其他'}HTML結構如下(當前是我寫的,但只能多選)
<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;//服務器返回的domain字段數據$scope.checkDomain = function (id) {$scope.defaultDomain=id; }
問題解答
回答1:定義一個變量賦當前value給他,然后在class做判斷,如果值=index就加上樣式
回答2:直接用radio形式來做,默認樣式隱藏就好了,然后對對應的label在樣式上做文章
相關文章:
1. Navicat for mysql 中以json格式儲存的數據存在大量反斜杠,如何去除?2. 新人求教MySQL關于判斷后拼接條件進行查詢的sql語句3. 在mybatis使用mysql的ON DUPLICATE KEY UPDATE語法實現存在即更新應該使用哪個標簽?4. mysql - 千萬數據 分頁,當偏移量 原來越大時,怎么優化速度5. php - 公眾號文章底部的小程序二維碼如何統計?6. mysql - 表名稱前綴到底有啥用?7. mysql - 數據庫表中,兩個表互為外鍵參考如何解決8. mysql - 這種分級一對多,且分級不平衡的模型該怎么設計表?9. mysql - 數據庫建字段,默認值空和empty string有什么區別 11010. mac OSX10.12.4 (16E195)下Mysql 5.7.18找不到配置文件my.cnf
