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

Question

我有一个包含选项的列表，我将其循环到 select 和 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 时检测它，或者如何在 select 时检测 ng-change 的任何想法ed option 又被点击了？谢谢。

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

编辑 - 示例： 我有一个 window，我可以在其中过滤列表。这个 window 我用 select 中的一个选项打开。所以当我打开 select 时，它会打开 window。现在想象一下，我设置了一些过滤条件，关闭 window 并且我的列表现在被过滤了。打开过滤器的选项仍然是 selected。现在我明白了，我必须稍微更改一下过滤条件，所以我再次打开下拉菜单，然后再次单击该选项以打开 window，但 id 不起作用，因为它仍然selected 和 ng-change 没有检测到 select 中的任何变化。我怎样才能强制执行此操作：

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 link: 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>

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

Ignore ng-click when opening dropdown

html

angularjs

html-select

angularjs-ng-click

angularjs-ng-change