0

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

1 回答 1

0

您的代码有两个问题：

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

要解决这个问题，您必须添加额外的类来突出显示选定的按钮，并确保ng-model无论用户在div.

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

于 2018-03-15T20:42:33.777 回答