AngularJS检测在<select>下拉列表中选择相同<option>的方法</select> </option>

时间:2013-12-28 23:05:52

标签: javascript html angularjs drop-down-menu

如果选择相同的选项,

ng-change不会触发。我正在使用下拉框来选择排序顺序,并希望选择相同的值以按相同的标准重新排序。

在Chrome上我无法正常工作。我已尝试在选择本身,选项和包含元素上触发ng-click事件,但点击似乎没有传播。

我尝试过使用ng-focusng-blur,但重点发生在实际选择任何选项之前,并且在用户实际点击远离下拉列表之后才会出现模糊选择了一个选项。这样可行,但有点奇怪,因为一开始什么也没发生。

我也尝试了ng-mousedownng-mouseup - 鼠标似乎没有触发,并且mousedown就像焦点一样,在选择选项之前就会触发。

这里有一个非常难看的解决方法:Detecting interaction with select box,但它甚至不适合我,因为mousedown没有开火。

必须有一些方法来做到这一点!我的最后一个hack是基本上从头开始构建一个下拉列表而不使用<select>

1 个答案:

答案 0 :(得分:1)

&#13;
&#13;
var app = angular.module("MyApp", []);

app.controller("MyCtrl", function() {
  this.data = ['price', 'user', 'date', 'color'];

  this.sort = function(param) {
    console.log("Sort by : " + param);
  }

});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="MyApp">
  <div ng-controller="MyCtrl as ctrl">
    <select>
      <option ng-click="ctrl.sort(opt)" ng-repeat="opt in ctrl.data">{{opt}}</option>
    </select>
  </div>
</div>
&#13;
&#13;
&#13;