angularjs - Angular JS - 使用函数重置下拉列表

Question

我在 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); 重置它，但是虽然这会重置索引，但它根本不会触发监听功能，因此这将不起作用。

有任何想法吗？

Answer 1

首先 - 看看 select 指令中的 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