Comment échanger les valeurs de la liste déroulante ?
J'ai deux listes déroulantes (c'est-à-dire une liste déroulante avec des valeurs minimales et une autre avec des valeurs maximales). Si je sélectionne une valeur dans la première liste déroulante avec une valeur supérieure à celle de la deuxième liste déroulante, elle doit être échangée. Mais j'ai utilisé la méthode d'échange normale, cela ne fonctionne que pour les zones de saisie.
Voici mon code déroulant personnalisé :
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;
}
}
}
Comment puis-je resoudre ceci?
Salut l'ami,
J'ai créé un exemple d'extrait de code où l'échange réel est effectué dans la setVal
fonction.
Dans votre extrait de code, ng-click="setMinVal(val)"
je pense que cela devrait être ng-click="setMinVal(value)"
.
Quoi qu'il en soit, vérifiez si cet extrait de code vous aidera à faire ce que vous voulez. Si vous souhaitez modifier le comportement, vous pouvez le faire dans la setVal
fonction.
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>