Радиокнопка отменяет выбор при нажатии в любом месте страницы

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 что означает, что кнопка находится в фокусе. Вот почему, когда вы нажимаете за пределами кнопки, цвет снова становится белым.

Чтобы решить эту проблему, вы должны добавить дополнительный класс, чтобы выделить выбранную кнопку и убедитесь, что ваш ng-model обновляется независимо от того, где пользователь нажимает внутри div,

Я создал образец jsfiddle, чтобы продемонстрировать обе проблемы. Удачи и добро пожаловать в Stackru!