ng-click 值更改 + $scope.watch 绑定无法正常工作
ng-click value change + $scope.watch bind not working properly
我有一个范围变量“$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.$watch 从未被调用。我不知道这是怎么回事,因为它过去是这样的。这是“$scope.searchType”声明:
$scope.sortType = 'createdAt';
您不需要添加 $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>
我有一个范围变量“$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.$watch 从未被调用。我不知道这是怎么回事,因为它过去是这样的。这是“$scope.searchType”声明:
$scope.sortType = 'createdAt';
您不需要添加 $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>