无法 select 之前 selected 选项

Question

ng-change 在选择之前选择的选项后不会被触发。因此我无法处理相同的下一个选择。

<select ng-model="selectedOption" ng-change="handleSelection()">                        
    <option value="A" selected>A</option>
    <option value="B">B</option>
    <option value="C">C</option>
    <option value="D">D</option>
</select>

我想向用户显示上次选择的选项并且想处理相同的选项。但是由于 ng-model 在下一个相同的选项选择时没有改变 ng-change 没有被解雇。

如何处理这种情况？

Answer 1

如果值发生变化，您应该使用 'ng-change'。在您的情况下，您希望在值未更改时处理事件，因此您可以使用 'ng-click' 来处理相同的选项 selection.

演示： http://jsfiddle.net/Despotix/vgw5bxrq/3/

<div ng-controller="MyCtrl">
  <select ng-model="selectedOption" ng-click="click()">
          <option value="A" selected>A</option>
          <option value="B" class="option">B</option>
          <option value="C" class="option">C</option>
          <option value="D" class="option">D</option>
   </select>
    {{seletedQueue}}
</div>

--

var myApp = angular.module('myApp', []);

function MyCtrl($scope) {
    $scope.seletedQueue = '';
    $scope.click = function(item) {
        $scope.seletedQueue += '->' + $scope.selectedOption;
    }
}

您可以 select 两次（或更多次）相同的选项： ->B->B->A

Answer 2

你可以不用 ng-change 只检查点击次数：

第一次 click event 在每次开局后加注 select

第 2 个 click event 在选择一项后加薪

我们使用 blur event 在失去焦点后清除点击计数

通过这种方式，您将获得没有 change event 和 without selecting new item 的所选项目：

<select ng-model="selectedOption" ng-click="handleSelection()" ng-blur="resetClickCount()">                        
    <option value="A" selected>A</option>
    <option value="B">B</option>
    <option value="C">C</option>
    <option value="D">D</option>
</select>

--

app.controller("myCtrl", function($scope) {
    $scope.clickCount = 0;

    $scope.handleSelection = function() {
        $scope.clickCount++;
        if ($scope.clickCount==2) {
            alert($scope.selectedOption);
            $scope.clickCount = 0;
        }
    }

    $scope.resetClickCount = function() {
        $scope.clickCount = 0;
    }
});

Answer 3

尝试在控制器中定义 selectedOption 值，而不是使用“selected”属性。

要跟踪先前选择的选项，您可以使用 $scope 变量并在 handleSelection() 函数的末尾更改它。 这里有一个工作演示 - jsfiddle.net `

$scope.selectedOption = "A";
$scope.lastSelectedOption = "A";
$scope.handleSelection = function(){
console.log("Selected Item: "+$scope.selectedOption);
console.log("Last Selected Item:" + $scope.lastSelectedOption);
console.log("");
$scope.lastSelectedOption = $scope.selectedOption;
}`

无法 select 之前 selected 选项

Not able to select previously selected option

html

javascript

angularjs

angularjs-select