Игнорировать нг-клик при открытии выпадающего

У меня есть список с опциями, которые я зацикливаю на выбор с 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 был нажат, или как обнаружить ng-change когда выбран option нажали снова? Благодарю.

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

РЕДАКТИРОВАТЬ - ПРИМЕР: у меня есть окно, где я могу отфильтровать список. Это окно я открываю с опцией в моем выборе. Поэтому, когда я открываю выбор, он открывает окно. Теперь представьте, что я установил некоторые критерии фильтра, закрыл окно, и мой список теперь отфильтрован. Опция, которая открывает фильтр, по-прежнему выбрана. Теперь я вижу, что мне нужно немного изменить критерии фильтра, поэтому я снова открываю раскрывающийся список и нажимаю второй раз на опцию, чтобы открыть окно, но 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>

еще раз спасибо

Источник

2 ответа

Решение

Используйте это вместо:

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

Источник

Мы можем достичь этого с небольшим взломом.

Пример на 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>

Источник
Другие вопросы по тегам