登录  /  注册
angular.js - angularjs 如何用一组按钮完成单选
PHPz
PHPz 2017-05-15 17:09:33
[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;
    }
PHPz
PHPz

学习是最好的投资!

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号