Question

我有一个有角度的应用程序，我想让两个表单字段互斥。因此，当一个用户输入一个文本字段时，我希望另一个文本字段自动清除。

一个简单的例子如下，一个带有千克和磅输入字段的表单：

<div ng-app="app" ng-controller="MainCtrl">
    kilos: <input ng-model="kilos"><br/>
    pounds: <input ng-model="pounds"><br/>
</div>

目前，我使用$scope.$watch来强制执行排他性规则：

angular.module('app', [])
    .controller('MainCtrl', function($scope) {
        $scope.kilos = '2';
        $scope.pounds = '';

        $scope.$watch("pounds", function() {
            $scope.kilos = "";     
        });

        $scope.$watch("kilos", function() {
            $scope.pounds = ""; 
        });  
    });

（您可以看到此fiddle中运行的代码）

然而，当更新磅数时，它会清除公斤数，这反过来又会使另一只手表清除磅数。最终的结果是吞下了第一个按键！

如果没有这种副作用，我如何强制执行此逻辑？

我希望能够在不添加任何进一步指令的情况下实现此目的，例如ng-change，模板。我们有一个单独的团队创建UI，因此希望完全在控制器内处理这个逻辑。

Answer 1

这里的工作Fiddle根据您的请求不使用其他指令。这个想法是只在必要时改变输入（即两者都有值）。相关代码如下：

angular.module('app', [])
.controller('MainCtrl', function($scope) {
    $scope.kilos = '2';
    $scope.pounds = '';

    $scope.notExclusive = function(){
        return $scope.kilos.length > 0 && $scope.pounds.length > 0;
    };

    $scope.$watch("pounds", function() {
        if($scope.notExclusive()){
            $scope.kilos = "";    
        }             
    });

    $scope.$watch("kilos", function() {
       if($scope.notExclusive()){
            $scope.pounds = "";    
        }     
    });  
});

Answer 2

看看这个（例子）[http://plnkr.co/edit/MBViS59uaelyHcXJODKV]。声明输入，使用number以便角度正确处理它。

  <input type="number" ng-model="kilos" ng-change="ktolbs()">
  <br>
  <input type="number" ng-model="pounds" ng-change="lbstok()">
  <br>

在改变函数上写一些并让它滚动。

  $scope.lbstok = function() {
    $scope.kilos = 2.2 * $scope.pounds;
  };

  $scope.ktolbs = function() {
    $scope.pounds = $scope.kilos / 2.2;
  }

此监视代码将根据另一个更改一个。再次使用number类型输入有很多帮助...

  $scope.$watch('kilos', function() {
    $scope.pounds = $scope.kilos / 2.2;
  });

  $scope.$watch('pounds', function() {
    $scope.kilos = $scope.pounds * 2.2;
  });

使用Angular创建互斥的表单字段

2 个答案: