javascript - 如何交换下拉值？

Question

我有两个下拉菜单(即一个下拉菜单包含最小值，另一个下拉菜单包含最大值)。如果我在第一个下拉列表中选择的值大于第二个下拉列表中的值，则必须交换它。但我使用的是普通的交换方法，它仅适用于输入框。

这是我的自定义下拉代码:

HTML:

  <div  class="dropdown">
     <ul>
       <li class="prfdwn" data-value="value" ng-repeat="value in data" ng-
        click="setMaxVal(val)" ng-blur="swap()">{{value.txt}}</li>
     </ul>
  </div>
 <div class="dropdown">
   <ul>
      <li class="prfdwn" data-value="value" ng-repeat="value in data" ng-
      click="setMinVal(val)" ng-blur="swap()">{{value.txt}}</li>
   </ul>
  </div>

JS:

$scope.data = [{
"id": 1,
"txt": 1,
 },
{
"id": 2,
"txt": 2,
},
{
"id": 3,
"txt": 3,
},
 {
 "id": 4,
"txt": 4,
 },
 {
"id": 5,
"txt": 5,
}];

   vm.swap = function () {
    if (vm.minVal != "" && vm.minVal != undefined && vm.maxVal != "" && 
  vm.maxVal  != undefined) {
        if (vm.minVal > vm.maxVal ) {
            var tempVal = vm.minVal;
            vm.minVal = vm.maxVal ;
            vm.maxVal  = tempVal;
        }

    }
}

我该如何解决这个问题？

Answer 1

你好_ friend ，

我制作了一个示例代码片段，其中实际交换被放入 setVal 函数中。

在您的代码片段中，我认为这个 ng-click="setMinVal(val)" 应该是 ng-click="setMinVal(value)"。

无论如何，请检查此代码片段是否可以帮助您完成您想要的操作。如果您想更改行为，可以在 setVal 函数中进行。

var app = angular.module('App', []);

app.controller('AppController', ['$scope', '$timeout', function($scope, $timeout) {

  $scope.minValue = '';
  $scope.maxValue = '';
  $scope.swapText = '';

  $scope.setVal = function(value, dropdownFlag) {

    // here you can change with what propery of the object you are working
    var val = value.txt;

    if (dropdownFlag == 1) {
      // coming from minValue dropdown
      if ($scope.maxValue >= val) {
        $scope.minValue = val;
      } else if ($scope.maxValue == '') {
        // max value is still not set so we can set the min value
        $scope.minValue = val;
      } else {
        // seems that maxValue is less than selected value - swap them
        $scope.minValue = $scope.maxValue;
        $scope.maxValue = val;
        showSwapText();
      }
    } else {
      // coming from maxValue dropdown
      if ($scope.minValue > val) {
        // minValue is greater that selected value then swap
        $scope.maxValue = $scope.minValue;
        $scope.minValue = val;
        showSwapText();
      } else {
        // seems that maxValue is less than selected value - swap them
        $scope.maxValue = val;
      }
    }
  }

  $scope.data = [{
      "id": 1,
      "txt": 1,
    },
    {
      "id": 2,
      "txt": 2,
    },
    {
      "id": 3,
      "txt": 3,
    },
    {
      "id": 4,
      "txt": 4,
    },
    {
      "id": 5,
      "txt": 5,
    }
  ];

  function showSwapText() {
    $scope.swapText = 'SWAPPED!';
    $timeout(function() {
      $scope.swapText = '';
    }, 1000);
  }

}]);

.dropdown{
  float: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>


<div ng-app="App" ng-controller="AppController">

  <h2>Min Value is {{ minValue }}</h2>
  <h2>Max Value is {{ maxValue }}</h2>
  <h2 style="position: fixed;top: 0;left: 200px;">{{ swapText }}</h2>

  <div class="dropdown">
    <span>Min</span>
    <ul>
      <li class="prfdwn" data-value="value" ng-repeat="value in data" ng-click="setVal(value, 1)">{{value.txt}}</li>
    </ul>
  </div>
  <div class="dropdown">
    <span>Max</span>
    <ul>
      <li class="prfdwn" data-value="value" ng-repeat="value in data" ng-click="setVal(value, 2)">{{value.txt}}</li>
    </ul>
  </div>
</div>