Question

我有这段代码：

＆＃13;

angular.module("myApp", []).controller("myController", function($scope) {
  $scope.currentOption;
  $scope.showWindow = false;

  $scope.myOptions = [{
    id: 1,
    name: 'This opens the window'
  }, {
    id: 2,
    name: 'Option 2'
  }, {
    id: 3,
    name: 'Option 3'
  }];

  $scope.showOption = function() {
    if ($scope.currentOption.id == 1) {
      $scope.showWindow = true;
    }
    console.log($scope.currentOption);
  }

  $scope.closeWindow = function() {
    $scope.showWindow = false;
  }
});

＆＃13;

.filterWindow {
  width: 100px;
  height: 100px;
  background-color: rgba(50, 50, 50, 0.5);
  z-index: 100;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp" ng-controller="myController">
  <select ng-options="option as option.name for option in myOptions" ng-change="showOption()" ng-model="currentOption"></select>

  <div ng-if="showWindow" class="filterWindow">
    <button ng-click="closeWindow()">Close</button>
  </div>
</div>

＆＃13;

我有一个有三个选项的下拉菜单。当我点击某个选项时，它会调用ng-change的函数。当我单击下拉列表中的另一个选项时，由于ng-change，该函数才被调用。我想每次点击一个选项时都调用该函数，同时连续两次调用该函数。例如：当我点击＆＃39;选项1＆＃39;时，它应该调用该函数（这是有效的）。当我再次点击相同选项（在这种情况下＆＃39;选项1＆＃39;）时，它应该再次调用该函数（这不起作用，因为ng-change没有检测到下拉列表的变化）。我用ng-click尝试了它，但是当我打开下拉列表时它也会调用函数，这对我来说很糟糕。我需要这个的原因是，在我的Web应用程序中，我的一个选项会打开一个窗口，我可以在其中筛选列表。因此，当我过滤它并且想要更改过滤器标准时，它应该通过单击此时选择的相同选项再次打开此窗口。这就是ng-click不是一个好解决方案的原因，因为当我打开下拉列表时，此窗口也会打开。我希望这很清楚。有什么想法吗？

编辑：所以我现在在一个窗口的代码段示例中构建了。当您单击打开窗口的选项时，它将在您第一次执行此操作时起作用。然后关闭窗口，但不要在之前更改选项...关闭窗口后，仍然会选择打开窗口的选项。当你再次点击它时，它不会打开窗口，因为没有变化，所以ng-change要求该功能不起作用......如何强迫这个？

由于

Answer 1

您应该更改此功能

$scope.showOption = function() { //Check whether drop down has any selected value
   if($scope.currentOption) { 
      console.log($scope.currentOption);
   }
}

使用ng-click代替ng-change 并保持点击事件。打开下拉菜单时将无法控制，但会触发事件。检查this plunker

多次点击相同选项时，在ng-change中调用函数

1 个答案: