javascript - 如何在更改之前捕获输入 radio 值？

Question

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

<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 更新之前拦截该值并对其进行测试？

Answer 1

您可以使用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;
  }
});