Question

此问题基于the answer provided here

我希望在另一个范围（lodash）设置为$scope.names时输出应用于范围（$scope.switch）的true函数的结果，并输出当lodash设置为filtered时，$scope.switch函数的结果应用于false范围。

所以我的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");
    });

以下是all the code的工作人员（这里更容易注意到问题）

问题是$scope.thingScope的输出与ng-repeat中显示的值不对应（现在每次点击时，它都会显示前一个值，即是，它落后一步）。提前谢谢！

Answer 1

好的，我发现几个问题。

0 - 您正在使用生成的列表元素（已过滤。这是将过滤器应用于名称的结果）。当交换机改变时，生成的列表没有完成。所以，你找不到元素。

1 - 你有很多元素尝试使用相同的名称（Swtich / Filter over names）。

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

3 - 您首先应用了switch的更改，然后点击了ng-click中的filterType。

所以，你可以做两件事。

在2个地方使用重复的过滤器（不推荐。）
ng-repeat与处理列表一起使用。并在控制器中处理所有过滤器。正如@shaunhusain做到的那样。

P.S。我认为过滤器可以更加清洁。而不是按名称，请检查此Plnkr：http://plnkr.co/edit/4uJ5AxP9xntgBe1hQrBW?p=preview

您可以按名称选择（仅点击），但必须再次点击更新过滤器才能应用更改。

Answer 2

认为你在视图中的逻辑变得有点沉重而没有意义，因为所有观察都会在视图中被束缚...如果你在程序上这样做，这就更容易解决。

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将过滤范围作为输出

2 个答案: