Angular JS - Đặt lại một menu thả xuống có chức năng

Question

Tôi có một trình lắng nghe được thiết lập trong Angular để kích hoạt một sự kiện khi tùy chọn của hộp chọn thay đổi.

Tôi cũng có nút, mà tôi muốn "đặt lại" hộp chọn để trống (tùy chọn KHÔNG 1).

Dưới đây là một số mã:

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"; 
} 

Listener chức năng trên hộp chọn:

$scope.$watch('orderProp', function (val) { 
     $scope.filteredMarkersProperty = $filter('filter')($scope.markersProperty, val); 
     $scope.zoomProperty = 11; 
     calcFocus(); 
    }); 

kinda này hoạt động, mặc dù chỉ đôi khi, và tôi không có ý tưởng lý do tại sao nó hoạt động (hoặc không) như tôi nghĩ rằng đó là cách sai lầm của việc đi về nó. Tôi đã thử đặt lại nó với jQuery .prop('selectedIndex',0);, nhưng trong khi điều này đặt lại chỉ mục nó không kích hoạt chức năng nghe ở tất cả vì vậy điều này sẽ không hoạt động.

Bất kỳ ý tưởng nào?

Answer 1

Đệ Nhất - hãy nhìn vào ngOptions trong chỉ thị chọn: 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> 

này sẽ làm việc miễn là '0' không phải là một trong các loại. Hộp chọn sẽ hiển thị trống khi giá trị của orderProps không khớp với bất kỳ giá trị nào trong các danh mục.

Chức năng $ watch của bạn không phải là người nghe trên hộp chọn, nó xem orderProps và orderProps có thể được thay đổi bên ngoài hộp chọn. Nếu bạn muốn một người nghe trên hộp chọn, bạn có thể thêm ng-change = "myOnChangeFn()".

Đã thêm plunkr đang hoạt động: http://plnkr.co/edit/fqWkJBYOXGaYsK9Fnedc?p=preview