Comment échanger les valeurs de la liste déroulante ?


anube

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?

codex

Salut l'ami,

J'ai créé un exemple d'extrait de code où l'échange réel est effectué dans la setValfonction.

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

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>

Articles connexes


Comment modifier dynamiquement les valeurs de la liste déroulante

utilisateur8295448 HI J'utilise le plugin davidstutz bootstrap-multiselect, je souhaite mettre à jour les valeurs de la liste déroulante du département en fonction de la valeur de la liste déroulante du client voici le code pour Client Dropdown (format C# ASP.

Comment changer la largeur de la liste déroulante Kivy

courbe d'apprentissage J'ai un menu déroulant kivy et je ne parviens pas à modifier la largeur du bouton. Est-ce que quelqu'un sait comment faire ça? J'ai joint une photo de ce à quoi ressemble le bouton. Voici la ligne où j'ajoute des boutons: self.drop_down.