单选按钮在单击页面上的任意位置时取消选择自身

Question

我正在尝试在 Angular 中实现分段控制按钮而不是普通单选按钮虽然如果我删除 CSS 类，正常的单选按钮工作正常，并且在导航到另一个页面操作系统单击同一页面上的任意位置时保持选中状态，但在添加 CSS 后，单选按钮选择不会保持不变并取消选择。

请帮忙

网页代码 ：

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

在控制器中.js调用下面的函数以获取单选按钮的值

$scope.getElement= function(obj){
$scope.test = obj.target.value;
}

Answer 1

您的代码存在 2 个问题：

1. 您<div><a tag><label><radio></label>嵌套元素，但仅当您精确单击标签时，才会设置ng-model。如果单击标签外的"小"，则不会更新ng-model。
2. 单击分段按钮时看到的灰色变化并不意味着已选中单选按钮。它正在应用以下引导类a.list-group-item:focus这意味着按钮处于焦点中。这就是为什么当您单击按钮外部时，颜色会变回白色。

要解决此问题，您必须添加额外的类来突出显示所选按钮，并确保无论用户在div内单击何处，您的ng-model都会更新。

我创建了一个示例 jsfiddle 来演示这两个问题。祝你好运，欢迎来到Stackoverflow！