Изменение значения ng-click + привязка $scope.watch не работает должным образом

Question

У меня есть переменная области видимости "$scope.searchType", которая по умолчанию равна "createAt". В моем 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';

Answer 1

Вам не нужно добавлять $watch, потому что у вас есть событие click, которое установит переменную фильтра.

Также ваш 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>