1

デフォルトで「createdAt」に等しいスコープ変数「$scope.searchType」があります。私の HTML には、スコープ変数の値を変更するオプションがあります。

<ul class="dropdown-menu" role="menu">
    <li><a ng-click="searchType = 'Anything'">Anything</a></li>
    <li><a ng-click="searchType = 'Payment'">Payment</a></li>
    <li><a ng-click="searchType = 'Total'">Total</a></li>
    <li><a ng-click="searchType = 'Tax'">Tax</a></li>
    <li><a ng-click="searchType = 'Payment Method'">Payment Method</a></li>
</ul>

私のコントローラーには、変更をリッスンするための次のものがあります。

$scope.$watch('searchType', function(newValue) {
    if(newValue == 'Payment') {
        $scope.searchTypeFilter = 'id';
        $scope.searchFiltered = true;
    } else if(newValue == 'Total') {
        $scope.searchTypeFilter = 'total';
        $scope.searchFiltered = true;
    } else if(newValue == 'Tax') {
        $scope.searchTypeFilter = 'tax';
        $scope.searchFiltered = true;
    } else if(newValue == 'Payment Method') {
        $scope.searchTypeFilter = 'paymentType';
        $scope.searchFiltered = true;
    } else {
        $scope.searchTypeFilter = '';
        $scope.searchFiltered = false;
        $scope.search = '';
    }
}, true);

何らかの理由で $scope.$watch が呼び出されません。以前のように、これがどのように機能しないのかわかりません。これは「$scope.searchType」宣言です:

$scope.sortType = 'createdAt';
4

1 に答える 1

2

フィルター変数を設定するクリック イベントがあるため、$watch を追加する必要はありません。

また、if/else は js オブジェクトで簡略化できます。

以下のデモまたはこのフィドルをご覧ください。

angular.module('demoApp', [])
.controller('mainController', MainController);

function MainController($scope) {
    var filterMapping = {
        
        Payment: 'id',
        Total: 'total',
        Tax: 'tax',
        'Payment Method': 'paymentType',
        Default: ''
    };
    
    this.setNewFilter = function(name) {
        $scope.searchTypeFilter = filterMapping[name] || filterMapping['Default'];
        $scope.searchFiltered = $scope.searchTypeFilter != '' ? true: false;
    };
  
    this.setNewFilter(''); // init filter to anything
}

MainController.$inject = ['$scope'];
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="demoApp" ng-controller="mainController as ctrl">
<ul class="dropdown-menu" role="menu">
    <li><a ng-click="ctrl.setNewFilter('Anything')">Anything</a></li>
    <li><a ng-click="ctrl.setNewFilter('Payment')">Payment</a></li>
    <li><a ng-click="ctrl.setNewFilter('Total')">Total</a></li>
    <li><a ng-click="ctrl.setNewFilter('Tax')">Tax</a></li>
    <li><a ng-click="ctrl.setNewFilter('Payment Method')">Payment Method</a></li>
</ul>
    {{searchFiltered}}<br/>
{{searchTypeFilter}}    
</div>

于 2015-06-21T19:42:22.813 に答える