打开下拉菜单时忽略 ng-click

Question

我有一个带有选项的列表，我用ng-options 循环到一个选择中。然后，当我单击其中一个选项时，我想调用一个函数。我先用ng-change 尝试过，但我遇到的问题是，当我连续两次单击同一个选项时，我无法检测到更改，所以它只是在我第一次单击时调用该函数它。比我用ng-click 试过的。现在的问题是，当我打开下拉菜单时，它也会检测到点击。所以它也调用函数。有没有办法，当我打开下拉菜单并在点击选项时检测它时忽略点击？我还尝试在我的函数中将$event 作为参数并在那里检查是否单击了该选项，但我没有找到解决方案。这是我的代码：

<select ng-options="option as option.name for option in myOptionsList" ng-model="currentOption" ng-click="myFunction($event)"></select>

我的清单：

myOptionsList = [
    {id: 1, name: 'Option 1'},
    {id: 2, name: 'Option 2'},
    {id: 3, name: 'Option 3'}
];

我的功能：

myFunction(event) {
    console.log(event);
    console.log('Print this if only option was clicked!');
}

任何想法如何在我打开下拉列表时忽略ng-click，并在单击option 时检测它，或者当再次单击选定的option 时如何检测ng-change？谢谢。

================================================ =========================

编辑 - 示例： 我有一个窗口，我可以在其中过滤列表。这个窗口我在我的选择中打开一个选项。所以当我打开选择时，它会打开窗口。现在想象一下，我设置了一些过滤条件，关闭窗口，我的列表现在被过滤了。打开过滤器的选项仍处于选中状态。现在我明白了，我必须稍微更改我的过滤条件，所以我再次打开下拉列表，然后再次单击选项以打开窗口，但 id 不起作用，因为它仍然处于选中状态并且 ng-更改未检测到选择中的任何更改。我该如何强制：

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;
  }
});

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

<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>
    Some filter criterias...
  </div>
</div>

再次感谢

Answer 1

改用这个：

<select ng-options="option as option.name for option in myOptionsList" 
       ng-model="selectedItem" ng-change="update()">
</select>

控制器

$scope.myOptionsList = [
    {id: 1, name: 'Option 1'},
    {id: 2, name: 'Option 2'},
    {id: 3, name: 'Option 3'}
];
  $scope.update = function() {
    console.log($scope.selectedItem)
  }

这里是工作 JS FIDDLE 链接：http://jsfiddle.net/jazibbashir/G8S32/1855/

================================================ =============================

新需求解决方案

只需将 ng-change 替换为 ng-click。

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;
  }
});

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

<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-click="showOption()" ng-model="currentOption"></select>

  <div ng-if="showWindow" class="filterWindow">
    <button ng-click="closeWindow()">Close</button>
    Some filter criterias...
  </div>
</div>

Answer 2

我们可以通过一些小技巧来实现这一点。

jsfiddle 上的示例。

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

function MyCtrl($scope) {
  $scope.myOptionsList = [{
    id: 1,
    name: 'Option 1'
  }, {
    id: 2,
    name: 'Option 2'
  }, {
    id: 3,
    name: 'Option 3'
  }];
  $scope.update = function($event) {
    if ($event.screenX == 0)
      console.log('click on OPTION');
    else
      console.log('click on SELECT');
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
  <select ng-options="option as option.name for option in myOptionsList" ng-model="selectedItem" ng-click="update($event)">
  </select>
  {{selectedItem.id}} {{selectedItem.name}}
</div>