单击页面上的任意位置时，单选按钮会自行取消选择

Question

我正在尝试在 Angular 中实现分段控制按钮而不是普通的单选按钮虽然如果我删除 CSS class，正常的单选按钮工作正常并且在导航到另一个页面时保持选中状态 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;
}

Answer 1

您的代码有 2 个问题：

您有嵌套元素 <div><a tag><label><radio></label>，但 ng-model 只有在您准确点击标签时才会设置。如果您在标签外点击一点点，ng-model 将不会更新。
当您点击分段按钮时看到的灰色变化并不意味着单选按钮被选中。它正在应用以下 bootstrap class a.list-group-item:focus 这意味着按钮处于焦点状态。这就是为什么当您在按钮外部单击时颜色变回白色的原因。

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

我创建了一个示例 jsfiddle 来演示这两个问题。祝您好运，欢迎使用 Whosebug！

单击页面上的任意位置时，单选按钮会自行取消选择

Radio button deselects itself on clicking anywhere on the page

radio-button

twitter-bootstrap

angularjs

angularjs-ng-repeat

segmentedcontrol