我有两个下拉菜单(即一个下拉菜单的最小值,另一个下拉菜单的最大值)。如果我在第一个下拉菜单中选择的值大于第二个下拉菜单,则必须交换该值。但是我使用了普通的交换方法,它仅适用于输入框。
这是我的自定义下拉代码:
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;
}
}
}
我该如何解决?
最佳答案
你好朋友,
我编写了一个示例代码片段,其中实际的交换内容已放入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>