$ scope.$ watch，过滤后的范围作为输出 [英] $scope.$watch with filtered scopes as output
问题描述
此问题基于此处提供的答案
当另一个作用域( $ scope.switch )设置为 true ，并输出在 $ scope时应用于设置为 filtered 范围的 lodash 函数的结果.switch false .
I want to output the result from a lodash function applied to a scope ($scope.names) when another scope ($scope.switch) is set to true, and to output the result of that lodash function applied to a filtered scope when $scope.switch is set to false.
所以我的 ng-repeat 像这样:
<ul>
<li ng-repeat="things in (filtered=(names | filter:filterType))">{{things}}</li>
</ul>
我使用两个 ng-click 来更改$ scope.switch的状态并应用/取消应用过滤器:
I use two ng-click to change the state of $scope.switch and to apply/unapply the filter:
<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 中的更改:
And I used this code in order to watch the changes in $scope.switch:
$scope.$watch('switch', function() {
$scope.thingScope =$scope.switch ? _.map($scope.names,"styles") : _.map($scope.filtered,"styles");
});
这是工作中的plunkr，其中带有所有代码(这很容易注意到这里的问题)
Here is the working plunkr with all the code (it's much easier to notice the problem here)
问题是 $ scope.thingScope 的输出与 ng-repeat 中显示的值不对应(现在每次单击时，它都会显示了前一个的值，也就是说，它落后了一步).预先感谢！
The problem is that the output of $scope.thingScope doesn't correspond to the values showed in the ng-repeat (right now every time I click, it shows the values of the previous one, that is, it goes one step behind). Thanks in advance!
推荐答案
考虑到视图绑定中发生的所有观察，视图中的逻辑变得有点沉重，没有任何意义.如果您改为按程序进行操作，则更容易解决.
Think your logic in the view is getting to the slightly heavy and not making sense due to all the watching that goes on with things bound in the view... this is easier to solve if you instead do it procedurally.
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>
这篇关于$ scope.$ watch，过滤后的范围作为输出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
