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

Hello_ friend，

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

在您的代码段中，我认为此ng-click="setMinVal(val)"应为ng-click="setMinVal(value)"。

无论如何，请检查此代码段是否可以帮助您执行所需操作。如果要更改行为，可以在setVal函数内执行此操作。

＆＃13;

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);
  }

}]);

＆＃13;

.dropdown{
  float: left;
}

＆＃13;

<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>

＆＃13;

Answer 2

li元素未获得焦点，因此blur事件永远不会触发。 HTML结构的一个小变化可能会有所帮助：

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

a元素会获得焦点，blur元素会触发它们。

现在，这是治疗症状。您可能想重新考虑如何构建HTML（可能有两个<select>元素），但这应该可以解决您的问题。

如何交换下拉值？

2 个答案: