ng單擊值更改+ $ scope.watch綁定無法正常工作

Question

我有一個範圍變量'$ scope.searchType'，它默認等於'createdAt'。在我的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.searchType'聲明：

$scope.sortType = 'createdAt'; 

Answer 1

您不需要添加$ watch，因爲您有一個單擊事件可以設置您的過濾器變量。

此外，您的if/else可以用js對象進行簡化。

請看下面的演示或這個fiddle。

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>