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

まず - 選択ディレクティブでngOptionsを見てみましょう：これは限り「0」カテゴリーの一つではないように動作します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> 

。 orderPropsの値がカテゴリの値と一致しない場合、選択ボックスには空白が表示されます。

$ watch関数は選択ボックスのリスナーではなく、orderPropsとorderPropsが選択ボックスの外で変更されるのを監視します。選択ボックスにリスナーを追加するには、ng-change = "myOnChangeFn（）"を追加します。

は作業plunkrを追加しました：http://plnkr.co/edit/fqWkJBYOXGaYsK9Fnedc?p=preview