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

这个KINDA虽然只是有时候会起作用,但我不知道它为什么会起作用(或者不起作用),因为我觉得它是错误的.我尝试用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