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

Question

我正在尝试在 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;
}

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！