Ignorieren ng-Klick beim Öffnen Dropdown

Question

Ich habe eine Liste mit Optionen, die ich in eine Auswahl mit ng-options Schleife. Dann würde ich gerne eine Funktion aufrufen, wenn ich auf eine der Optionen klicke. Ich versuchte es zuerst mit ng-change, aber das Problem, das ich hatte, ist, dass ich eine Änderung nicht feststellen kann, wenn ich die gleiche Option zweimal nacheinander anklickte, so dass es nur die Funktion aufruft, wenn ich das erste Mal darauf klicke. Dann habe ich es mit ng-click versucht. Das Problem war jetzt, dass es auch den Klick erkennt, wenn ich das Dropdown öffne. So nennt es dann auch die Funktion. Gibt es eine Möglichkeit, den Klick zu ignorieren, wenn ich das Dropdown öffne und es nur beim Klick auf eine Option erkenne? Ich habe auch versucht, den $event als Parameter in meiner Funktion anzugeben und dort zu überprüfen, ob die Option angeklickt wurde, aber ich habe die Lösung nicht gefunden. Dies ist mein Code:

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

Meine Liste:

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

Meine Funktion:

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

Irgendwelche Ideen, wie ng-click zu ignorieren, wenn ich die Drop-down nur öffnen und erkennen es, wenn option wurde geklickt, oder wie erkennt man ng-change, wenn der ausgewählte option erneut angeklickt wurde? Vielen Dank.

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

EDIT - Beispiel: ich habe ein Fenster, in dem ich eine Liste filtern. Dieses Fenster öffne ich mit einer Option in meiner Auswahl. Wenn ich die Auswahl öffne, wird das Fenster geöffnet. Stellen Sie sich nun vor, dass ich einige Filterkriterien festlege, das Fenster schließe und meine Liste jetzt gefiltert wird. Die Option, mit der der Filter geöffnet wird, ist weiterhin ausgewählt. Jetzt sehe ich, dass ich meine Filterkriterien ein wenig ändern muss, also öffne ich das Dropdown erneut und klicke ein zweites Mal auf die Option, um das Fenster zu öffnen, aber ID funktioniert nicht, weil es immer noch ausgewählt ist und ng- Änderung hat keine Änderungen in der Auswahl erkannt. Wie kann ich diese Kraft:

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>

Thanks again

Answer 1

Verwenden Sie stattdessen:

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

-Controller

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

Hier

ist die Arbeits JS FIDDLE Link: http://jsfiddle.net/jazibbashir/G8S32/1855/

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

New Requirment Lösung

Ersetzen Sie einfach ng-change mit 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

Wir können dies mit wenig Hack erreichen.

Beispiel für 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>