ドロップダウンの値を入れ替える方法は？

Question

2つのドロップダウンがあります（最小値のドロップダウンと最大値のドロップダウン）。最初のドロップダウンの値を2番目のドロップダウンより大きい値で選択すると、その値をスワップする必要があります。しかし、私は通常のスワップメソッドを使用して、それは入力ボックスのためだけに働いています。ここで

は私のカスタムドロップダウンコードです：

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_友人、

Iは、実際のスワップが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>

Answer 2

li要素はフォーカスを取得しないため、blurイベントは発生しません。

<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構造の小さな変化は助けることができます。

今、症状を治療しています。 HTMLを構造化する方法（おそらく2つの<select>要素）を再考することが考えられるかもしれませんが、これはすぐに問題を解決するはずです。