我在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);重置它,但是当重置索引时它根本不会触发监听功能,所以这不起作用.
有任何想法吗?
首先 – 看一下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