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

前端之家收集整理的这篇文章主要介绍了angularjs – Angular JS – 使用函数重置下拉列表前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我在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

猜你在找的Angularjs相关文章