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，或者当所选ng-change时如何检测option再次点击？感谢。

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

编辑 - 示例： 我有一个窗口，我可以在其中筛选列表。这个窗口我在我的选择中打开了一个选项。因此，当我打开选择时，它会打开窗口。现在想象一下，我设置了一些过滤标准，关闭窗口，我的列表现在被过滤了。仍然会选中打开过滤器的选项。现在我明白了，我必须稍微改变我的过滤器标准，所以我再次打开下拉列表，然后再次点击该选项打开窗口，但是id不起作用，因为它＆＃39; s仍然被选中，ng-change没有检测到选择中的任何变化。我该怎么强迫这个：

＆＃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;
  margin-top: 20px;
}

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

＆＃13;

再次感谢

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

以下是Working JS FIDDLE链接：http://jsfiddle.net/jazibbashir/G8S32/1855/

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

新的需求解决方案

只需用ng-click替换ng-change。

＆＃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;
  margin-top: 20px;
}

＆＃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-click="showOption()" ng-model="currentOption"></select>

  <div ng-if="showWindow" class="filterWindow">
    <button ng-click="closeWindow()">Close</button>
    Some filter criterias...
  </div>
</div>

＆＃13;

Answer 2

我们可以用很少的黑客来实现这一点。

jsfiddle上的示例。

＆＃13;

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

＆＃13;

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

＆＃13;

打开下拉列表时忽略ng-click

2 个答案: