Угловой JS - Сброс выпадающего меню с функцией

Question

У меня есть слушатель, настроенный в Angular, чтобы вызвать событие, когда изменяется опция select box.

У меня также есть кнопка, которую я хочу «сбросить» в поле выбора пустым (НЕ вариант 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 в избранной директивы: 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