我正在尝试在 Angular 中实现分段控制按钮而不是普通单选按钮，尽管如果我删除 CSS 类，普通单选按钮工作正常并且在导航到另一个页面时保持选中状态 os 单击同一页面上的任意位置，但在添加 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;
}
您的代码有两个问题：
<div><a tag><label><radio></label>但ng-model只有在您完全单击标签时才会设置。如果您在标签外单击一点，ng-model则不会更新。a.list-group-item:focus，这意味着按钮处于焦点。这就是为什么当您在按钮外部单击时颜色会变回白色的原因。要解决这个问题，您必须添加额外的类来突出显示所选按钮，并确保ng-model无论用户在div.
我创建了一个示例jsfiddle来演示这两个问题。祝你好运，欢迎来到 Stackoverflow！
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句