Angularjs сбрасывает радиовход, если щелкнуть два раза подряд

0

У меня есть следующее событие jQuery click, которое я пытаюсь "угловато" с помощью ng-click, но не могу понять, как это сделать.

$('body').on('click change', 'input[type="radio"]:not([disabled])', function(event) {
    $(this).prop('checked') //if checked
    ? $(this).prop('checked',false).data('waschecked', false)   //uncheck
    : $(this).prop('checked',true).data('waschecked', true);    //else check
});

Цель состоит в том, чтобы проверить, действительно ли элемент уже выбран, и если это произойдет, сбросьте переключатель.

Может ли кто-нибудь указать мне в правильном направлении?

2 ответа

0

Мое предложение здесь - использовать одно значение для состояния группы и другое значение для кнопок и использовать ng-click для сравнения кнопок с состоянием группы.

например:

<input type="radio" ng-checked="true" ng-model="buttons" value="one" ng-click="radioChanged()">
<input type="radio" ng-checked="false" ng-model="buttons" value="two" ng-click="radioChanged()">
<input type="radio" ng-checked="false" ng-model="buttons" value="three" ng-click="radioChanged()">

$scope.radioChanged = function (){
    if ($scope.buttons === $scope.group){
        $scope.buttons = undefined;
    }
    $scope.group = $scope.buttons;
    console.log($scope.group, $scope.buttons);
};

http://plnkr.co/edit/lh9XjWr1cCxdf1asuKxo?p=preview

  • 0
    Может быть бесконечное количество групп переключателей, так что это не сработает для меня. Не всегда будет только один набор переключателей на странице, и невозможно сказать, сколько их будет.
  • 0
    в вашем интерфейсе никогда не бывает «бесконечного» количества предметов. Во время разработки вы можете не знать, сколько у вас есть, но во время выполнения вы определенно должны знать, сколько у вас; маловероятно, что у вас нет данных для кнопки, которую вы собираетесь поместить на экран. Это действительно звучит так, будто вы пытаетесь превратить это в проблему XY, если вы не можете определить, что вы пытаетесь изобразить.
Показать ещё 1 комментарий
0

Это нестандартное поведение, но вот пример, который делает то, что вы ищете: https://jsbin.com/sicuhugevu/1/edit?html,js,output

Для тех, кто не хочет посетить JSBin:

JS:

angular
  .module('test', [])
  .controller('testCtrl', function($scope) {
    $scope.radios = {
      selected: null,
      last: null
    };

    $scope.radioClick = function(event) {
      if ($scope.radios.last === $scope.radios.selected) {
        $scope.radios.selected = null;
        $scope.radios.last = null;

        return;
      }

      $scope.radios.last = event.target.value;
    };
});

И HTML:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body data-ng-app="test">
  <div data-ng-controller="testCtrl">
    <label><input type="radio" name="test" value="1"
                  data-ng-click="radioClick($event)"
                  data-ng-model="radios.selected">Option 1</label>
    <label><input type="radio" name="test" value="2"
                  data-ng-click="radioClick($event)"
                  data-ng-model="radios.selected">Option 2</label>
    <label><input type="radio" name="test" value="3"
                  data-ng-click="radioClick($event)"
                  data-ng-model="radios.selected">Option 3</label>
  </div>
</body>
</html>

И локальная версия:

angular
  .module('test', [])
  .controller('testCtrl', function($scope) {
    $scope.radios = {
      selected: null,
      last: null
    };
  
    $scope.radioClick = function(event) {
      if ($scope.radios.last === $scope.radios.selected) {
        $scope.radios.selected = null;
        $scope.radios.last = null;
        
        return;
      }
      
      $scope.radios.last = event.target.value;
    };
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body data-ng-app="test">
  <div data-ng-controller="testCtrl">
    <label><input type="radio" name="test" value="1"
                  data-ng-click="radioClick($event)"
                  data-ng-model="radios.selected">Option 1</label>
    <label><input type="radio" name="test" value="2"
                  data-ng-click="radioClick($event)"
                  data-ng-model="radios.selected">Option 2</label>
    <label><input type="radio" name="test" value="3"
                  data-ng-click="radioClick($event)"
                  data-ng-model="radios.selected">Option 3</label>
  </div>
</body>
</html>
  • 0
    У меня много радиогрупп, поэтому я не уверен, сработает ли это в моем случае использования.
  • 0
    Я уверен, что это может быть изменено для работы со многими радиогруппами. Однако, как все говорили, это не нормальное поведение для переключателей. Вот почему вам придется иметь дело с дополнительной работой, как это.
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню