Question

我有两个input元素，我在其中定义了min和max。我如何能够反转这些值，最好是HTML或JS（Angular）。

例如：

<label>
    Width:
    <input type="number" min="10" max="100">
</label>

<label>
    Height:
    <input type="number" min="50" max="400">
</label>

如果用户在第一个输入中输入400，则第二个输入中的最小值和最大值将被min="10" max="100"替换。

换句话说，值必须是可互换的。

Answer 1

以下是使用一些额外变量和ng-change

完成工作的方法

var myApp = angular.module('myApp', []);
myApp.controller('MyCtrl', ['$scope', function($scope) {
  $scope.minWidth = 10;
  $scope.maxWidth = 100;
  $scope.minHeight = 50;
  $scope.maxHeight = 400;
  
  $scope.update = function(v) {
    if((v == 'w' && $scope.width > $scope.maxWidth) || (v == 'h' && $scope.height > $scope.maxHeight)) {
      let reverseMax = $scope.maxWidth;
      let reverseMin = $scope.minWidth;
      $scope.maxWidth = $scope.maxHeight;
      $scope.maxHeight = reverseMax;
      $scope.minWidth = $scope.minHeight;
      $scope.minHeight = reverseMin;
    }
  }
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<label>
    Width:
    <input type="number" 
           ng-model="width" 
           ng-change="update('w')"
           ng-min="minWidth" 
           ng-max="maxWidth">
    {{minWidth}} - {{maxWidth}}
</label>
<br/>
<label>
    Height:
    <input type="number" 
           ng-model="height" 
           ng-change="update('h')"
           ng-min="minHeight" 
           ng-max="maxHeight">
    {{minHeight}} - {{maxHeight}}

</label>
</div>

如何根据条件切换最小和最大输入值？

1 个答案: