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-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;
    }

解决方案

定义一个变量赋当前value给他，然后在class做判断，如果值＝index就加上样式

这篇关于angular.js - angularjs 如何用一组按钮完成单选的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！