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

发布时间：2020-12-17 07:32:01 所属栏目：安全来源：网络整理

导读：我在Angular中设置了一个监听器,以便在选择框的选项发生变化时触发事件. 我还有一个按钮,我想将选择框“重置”为空白(不是选项1). 这是一些代码： HTML： select id="dropdown" ng-model="orderProp" option ng-repeat="cats in categories" value="{{cats}}

我在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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!