如何交換下拉值？

我有兩個下拉列表（即一個下拉列表的最小值和另一個最大值）。如果我在第一個下拉列表中選擇一個值大於第二個下拉列表的值，那麼它必須交換。但我使用正常的交換方法，它只適用於輸入框。如何交換下拉值？

這裏是我的自定義下拉代碼：

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

    } 
}

我該如何解決這個問題？

來源

2017-04-19 anub

的'blur'事件不會發生的一個'li'元素，因爲在默認情況下它不會獲得焦點。你可能想要將'ng-click'和'ng-blur'移動到嵌套在'li'中的一個錨點元素。 –

@ Mike McCaughan請你清楚解釋一下。 – anub

Hello_朋友，

我做了一個示例代碼段，其中實際交換被製成setVal功能。

在你的代碼片段ng-click="setMinVal(val)"我認爲應該是。

無論如何檢查這段代碼是否會幫助你做你想做的事。如果你想改變行爲，你可以在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>

來源

2017-04-20 07:02:14 codtex

嗨朋友對這種文字的迴應，如何檢查更大的條件（我; E {val：1，txt：「4英尺1英寸或124.46cm」}）。在setVal（value，1）中給出，如何爲文本執行此操作。 – anub

@bpbsr如果你知道你的對象的** val **屬性代表這個對的強度，那麼你可以使用'var val = value.val;'而不是'var val = value.txt;'' setVal'函數，否則您可以使用'regex'來解析** txt **屬性並獲取您需要的比較值。 – codtex

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>元素），但這應該解決您的緊急問題。

來源

2017-04-19 15:57:27

謝謝你，讓我試試。 – anub

這是行不通的。 – anub

如何交換下拉值？

回答

相關問題