8

我在 Angular 中设置了一个侦听器，以在选择框的选项更改时触发事件。

我还有一个按钮，我想将选择框“重置”为空白（不是选项 1）。

这是一些代码：

HTML：

<select id="dropdown" ng-model="orderProp" >
  <option ng-repeat="cats in categories" value="{{cats}}">{{cats}}</option>
</select>
<button id="showHide" ng-click="showAll($event)" >Show all results</button>

Javascript：

$scope.showAll = function($event){
    $scope.orderProp ="0";
}

选择框上的监听器功能：

   $scope.$watch( 'orderProp', function ( val ) {
        $scope.filteredMarkersProperty = $filter('filter')($scope.markersProperty, val);
        $scope.zoomProperty = 11;
        calcFocus();
    });

这有点有效，虽然只是有时，我不知道为什么它有效（或不有效），因为我认为这是错误的处理方式。我尝试用 jQuery 重置它.prop('selectedIndex',0);，但是虽然这会重置索引，但它根本不会触发监听功能，所以这不起作用。

有任何想法吗？

4

1 回答 1

12

首先 - 看看选择指令中的 ngOptions：http ://docs.angularjs.org/api/ng.directive:select

<select ng-options="cats for cats in categories" ng-model="orderProps"></select>

<button ng-click="orderProps='0'">Show all results</button>

只要“0”不是类别之一，这将起作用。当 orderProps 的值与类别中的任何值都不匹配时，选择框将显示空白。

您的 $watch 函数不是选择框上的侦听器，它监视 orderProps 并且 orderProps 可以在选择框之外进行更改。如果你想在选择框上有一个监听器，你可以添加一个 ng-change="myOnChangeFn()"。

添加了一个工作 plunkr：http ://plnkr.co/edit/fqWkJBYOXGaYsK9Fnedc?p=preview

于 2013-04-10T09:20:54.160 回答