angular.js - angularjs 如何用一组按钮完成单选
导读:问题描述辛苦各位了,请问如何用一组按钮来做单选的问题,万分感谢!如图,需要做到2点:1、页面加载后,根据传回的值 domain:'8' ,设置默认勾选的按钮和按钮里的图标class...
问题描述
辛苦各位了,请问如何用一组按钮来做单选的问题,万分感谢!
如图,需要做到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. angular.js - 有人看过Angular即学即用这本书吗2. angular.js - 如何用gulp打包ionic应用,项目JS脚本是使用 require.js 来组织的3. angular.js - angularjs怎么实现跳转的,是要写路由吗4. angular.js - AngularJS 中如何给一个自定义指令 directive 传递一个对象类型的参数?5. angular.js - 我用ng-repeat出来的数据为什么在IE11中只显示{{week}}?6. angular.js - angular与angular-material连用获取不到卡片的宽高7. angular.js - angular实现后台管理,导航路径与菜单导航关联8. angular.js - 求Angular ui-router 多层嵌套的Demo!9. angular.js - ng-show 表达式动态显示10. angular.js - angular自定义指令中如何监视属性值的变化
