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（）”。

添加了一个有效的插件：http://plnkr.co/edit/fqWkJBYOXGaYsK9Fnedc?p=preview

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

1 个答案: