$scope$以筛选的作用域作为输出进行监视

此问题基于此处提供的答案

当另一个作用域($scope.switch)被设置为true时，我想输出应用于作用域的lodash函数的结果($scope.names)，并且当$scope.switch被设置为false时，输出应用于filtered作用域的那个lodash函数的结果。

所以我的ng-repeat应该是这样的：

<ul>
<li ng-repeat="things in (filtered=(names | filter:filterType))">{{things}}</li>
</ul>

我使用两个ng-click来更改$scope.switch的状态，并应用/取消应用过滤器：

<a ng-click="switch = false; filterType=''">unswitch - No Filters</a><br><br>
<a ng-click="switch = true; filterType={name:'!Jimmy'}">switch - Not Jimmy</a>

我使用这个代码是为了观察$scope.switch:的变化

$scope.$watch('switch', function() {
$scope.thingScope =$scope.switch ? _.map($scope.names,"styles") : _.map($scope.filtered,"styles");
});

这是包含所有代码的工作plunkr(在这里更容易注意到问题)

问题是$scope.thingScope的输出与ng-repeat中显示的值不一致(现在每次单击时，它都会显示上一个的值，也就是说，它落后了一步)。提前感谢！

好的，我发现了一些问题。

0-您正在使用生成的列表元素(Filtered.，这是对名称应用筛选器的结果)。切换时，生成的列表未完成。所以，你找不到元素。

1-你有很多元素试图处理相同的内容(Swtich/Filter over names)。

2-您正在使用显示：$scope.thingScope = $scope.switch ? _.map($scope.names,"styles") : _.map($scope.filtered,"styles");因此，当$scope.switch == true时，您正在显示$scope.names。条件如此错误。

3-您首先应用switch的更改，然后在ng单击中应用filterType。

所以，你可以做两件事。

在两个位置使用重复的过滤器(不推荐使用。)
ng重复处理列表。并运行控制器中的所有过滤器。正如@shunhusain所做的

p.S.我认为它可以更干净，有一个主动过滤器。不按姓名，请检查此Plnkr：http://plnkr.co/edit/4uJ5AxP9xntgBe1hQrBW?p=preview

您可以按名称进行选择(仅单击)，但必须在更新筛选器中再次单击才能应用更改。

认为视图中的逻辑变得有点沉重，并且由于视图中绑定的事物所进行的所有监视而没有意义。。。如果你按照程序来做，这个问题会更容易解决。

http://plnkr.co/edit/ZExywkLtDxuT82Ud6gYl?p=preview

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.13.1/lodash.min.js"></script>
</head>
<body>
<div ng-controller="myCtrl" ng-app="myApp">
0. <b>Switch</b>: {{switch}} <br/><br/>
1. <b>Output</b>: {{thingScope}} <br/><br/>
2. <b>Filtered List</b>:
<ul>
<li ng-repeat="things in filtered">{{things}}</li>
</ul>
<a ng-click="changeSwitch(false, '')">unswitch - No Filters</a><br><br>
<a ng-click="changeSwitch(true, {name:'!Jimmy'})">switch - Not Jimmy</a>
</div>


<script type="text/javascript">
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $filter) {
$scope.switch = false;
// set the default sort type
$scope.filterType = '';
var names=[{name:"Johny", styles:["one","two","three"]},{name:"Jimmy", styles:["two","three","four"]},{name:"Kevin", styles:["three","four","five"]}];
// Option B:
function filterData(searchObj){
$scope.filtered = $filter('filter')(names, searchObj);
};
filterData();
$scope.changeSwitch = function(newVal, filterType){
$scope.switch = newVal;
filterData(filterType);
$scope.thingScope = !$scope.switch ? _.map(names,"styles") : _.map($scope.filtered,"styles");
}
});
</script>
</body>
</html>

相关内容

最新更新

热门标签：