8

選択ボックスのオプションが変更されたときにイベントをトリガーするように、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);たが、これによりインデックスがリセットされますが、リッスン機能がまったくトリガーされないため、これは機能しません。

何か案は？

4

1 に答える 1

12

まず、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」がカテゴリの 1 つでない限り機能します。orderProps の値がカテゴリのどの値とも一致しない場合、選択ボックスには空白が表示されます。

$watch 関数は選択ボックスのリスナーではありません。orderProps を監視し、orderProps が選択ボックスの外で変更される可能性があります。選択ボックスにリスナーが必要な場合は、ng-change="myOnChangeFn()" を追加できます。

動作する plunkr を追加しました: http://plnkr.co/edit/fqWkJBYOXGaYsK9Fnedc?p=preview

于 2013-04-10T09:20:54.160 に答える