如果连续单击两次，Angularjs会重置单选输入

Question

我有以下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
});

目的是检查该项目是否确实已被选中，如果已选中，请重置单选按钮。

有人能指出我正确的方向吗？

Answer 1

这是非标准行为，但以下示例可以满足您的需求： 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>

Answer 2

我的建议是为组状态使用一个值，为按钮使用不同的值，然后使用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=预览

如果连续单击两次，Angularjs会重置单选输入

问题描述

2 个解决方案

解决方案1
0 2015-07-06 21:18:16

解决方案2
0 2015-07-08 23:06:37

如果连续单击两次，Angularjs会重置单选输入

问题描述

2 个解决方案

解决方案1 0 2015-07-06 21:18:16

解决方案2 0 2015-07-08 23:06:37

解决方案1
0 2015-07-06 21:18:16

解决方案2
0 2015-07-08 23:06:37