如何在输入无线电值更改之前捕获它

How to catch input radio value before it's changed?

本文关键字：输入 无线电      更新时间：2023-09-26

我使用单选按钮选择表单中的内容类型

<input type="radio" ng-model="type" value="file" />
<input type="radio" ng-model="type" value="audio" />
<input type="radio" ng-model="type" value="video" />

我想要类似于以下代码的东西

$scope.$watch('type', function(type, previousType) {
    if(!confirm('Are you sure you want to change the type?'))
        $scope.type = previousType;
});

显然，此代码触发了一个无限循环，因为$scope.type = previousType行触发了观察程序。或者像这样：

var ignore = false;
$scope.$watch('type', function(type, previousType) {
    if(!confirm('Are you sure you want to change the type?') && !ignore) {
        ignore = true;
        $scope.type = previousType;
        ignore = false;
    }
});

但这会触发争用条件，ignore将在观察程序触发之前重置为 false。

我还尝试将ng-model值存储在临时变量中，观察此变量，并在单选按钮上设置ng-selected="type == 'file'"（等等），但它也不起作用。

有没有一种优雅的方法可以在实际ng-model更新之前拦截值并对其进行测试？

您可以使用

ng-click来实现此目的：

<input ng-click="changed()" type="radio" ng-model="my.type" value="file" /> 

var lastVal = false;
$scope.changed = function(){
  if (lastVal !== false && $scope.my.type != lastVal){
    if (!confirm('are you sure?')) {
        $scope.my.type = lastVal;
      return;
    }
  }
  lastVal = $scope.my.type;
}

http://jsfiddle.net/aws7uLwr/

注意：这将触发那些元素的任何观察者，这些元素可能重要，也可能无关紧要，具体取决于您的实现。

编辑：评论中引用的替代答案：

var ignore = false;
$scope.$watch('type', function(type, previousType) {
  if (ignore){
    ignore = false;
    return;
  }
  if(!confirm('Are you sure you want to change the type?')) {
    ignore = true;
    $scope.type = previousType;
  }
});
我不

熟悉确切的语法（ng 东西），但尝试在$scope.type = previousType;之前"取消绑定"手表，并紧跟在该行之后，重新绑定.$watch的东西......

这样，当你重置.type时，它不会触发"观察者"，你可以很容易地避免无限循环，以及冗余"标志"的需要（代码中ignore）。

相关文章：