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

您的代码有两个问题：

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

要解决此问题，您必须添加额外的课程以突出显示所选按钮，并确保无论用户在ng-model内点击的位置如何都更新div。

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

单击任何一个页面上的单选按钮会取消选择

1 个答案: