我正在尝试在Angular中实现分段控制按钮而不是普通的单选按钮 虽然如果我删除CSS类,普通单选按钮工作正常,并在导航到另一个页面时保持选中,然后单击同一页面上的任何位置,但添加CSS后,单选按钮选择不会保持不变并取消选择。
请帮助解决此问题
HTML代码:
<div class ="segmented-control">
<div ng-repeat="p in LP">
<a href="#" class="list-group-item">
<label> {{p.label}}
<input type ="radio" ng-model="test" name="test" value="{{p.value}}" ng-click="getElement($event)"></label>
</a>
</div>
</div>
CSS:
.segmented-control input[type="radio"] {
visibility:hidden;
}
.segmented-control .list-group-item {
display: inline-block;
}
在controller.js中 调用以下函数来获取单选按钮的值
$scope.getElement= function(obj){
$scope.test = obj.target.value;
}
答案 0 :(得分:0)
您的代码有两个问题:
<div><a tag><label><radio></label>
,但只有在您完全点击标签时才会设置ng-model
。如果您在标签外点击一点,则ng-model
将不会更新。a.list-group-item:focus
,这意味着按钮处于焦点。这就是为什么当您点击按钮外部时,颜色会变回白色。要解决此问题,您必须添加额外的课程以突出显示所选按钮,并确保无论用户在ng-model
内点击的位置如何都更新div
。
我创建了一个示例jsfiddle来演示这两个问题。祝你好运,欢迎来到Stackoverflow!