angular.js - angularjs 如何用一組按鈕完成單選

Question

辛苦各位了，請問如何用一組按鈕來做單選的問題，萬分感謝！

如圖，需要做到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-class="{active:$index + 1 == defaultDomain}"
                            ng-click="checkDomain($index+1)"
                            ng-model="domain"
                            class="btn-item btn-domain aui-btn aui-btn-secondery aui-btn-block"
                            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;
    }

Answer 1

定義一個變數賦當前value給他，然後在class做判斷，如果值＝index就加上樣式

Answer 2

直接用radio形式來做，預設樣式隱藏就好了，然後對對應的label在樣式上做文章