javascript - 动态 AngularJS 过滤器

Question

我有一个动态导航菜单，对应于传递到创建表格的各种过滤器，根据按下的按钮过滤表格中的内容。

我在 $scope 中有一个名为 $scope.uniqueFilter 的变量。选择的过滤器取决于按下的按钮。在链接的 ng-click 上，我定义了一个函数，该函数接受按钮参数的输入，将其传递给该函数，然后设置 $scope.uniqueFilter 等于按钮的特定过滤方法。

单击时，我已经能够按预期传递所需的过滤器，但它们不仅没有应用于内容，而且完全阻止了表格的创建。

我试图重复的行的内容如下所示:

<tr class="progress" ng-repeat="idea in ideas | filter:uniqueFilter" >

更改 uniqueFilter 的按钮设置如下:

<div class="nav">
    <div ng-controller="NavController">
      <p ng-repeat="link in links">
        <block class="button" href="{{link.URL}}" title="{{link.name}}">
          <a href="{{link.URL}}" ng-click="getFilter(link.show)">
            {{link.name}}
          </a>
        </block>
      </p>
  </div>
</div>

这是 NavController 的内容:

app.controller('NavController', ['$scope', 'DataFactory', function($scope, DataFactory){


$scope.links = [
    {'name':'About', //title that will be displayed on the link
    'URL': '#/about', //URL/view that the link will lead to/show
    'show':'(not actually a filter here)' //view may simply change so some info is hidden or revealed
    },
    {'name':'Active',
    'URL': '#/active',
    'show':'active'  //I want all things with active:true
    },
    {'name':'Complete',
    'URL': '#/active', //this is supposed to go to #/active, not a bug
    'show':'!active' //I want all things with active:false
    }
];

$scope.ideas = DataFactory;


$scope.uniqueFilter=''; //variable to allow access to individual filters based on which button is clicked
$scope.getFilter = function(theFilter){ //called onclick for each button and passes in the link.show that each button has, defining the filter to use
    $scope.uniqueFilter = theFilter;  //sets the variable to match desired filter
    alert("I just set the filter to "+$scope.uniqueFilter);
};
}]);

DataFactory，填充表的内容:

app.factory('DataFactory', function(){
    return [
        {'title':'Title1',
        'A': '80',
        'B': '6',
        'active': true //this is what should determine if it shows or not
        },
       {'title':'Title2',
        'A': '80',
        'B': '6',
        'active': true
        },
        {'title':'Title3',
        'A': '80',
        'B': '6',
        'active': false
        },
    ];
});

我觉得我遗漏了一些明显的东西，但我想我对 Angular 的了解还不够彻底，无法找到它。感谢您提供的任何帮助!

编辑

所以我加入了一些建议的更新。

这是我的 ng-repeat 标签的更好 View :

<table>
    <tr class="title_bar">
        <td>Title</td>
        <td>A</td>
        <td>B</td>
    </tr>

    <tr class="progress" ng-repeat="idea in ideas | filter:uniqueFilter">
<!-- uniqueFilter here does nothing, and {value:true} stops values from appearing,
 but {active:true}(and false) works. But I need this filter to change based on what
 is clicked, hence why I want uniqueFilter to work -->
        <td>{{idea.title}}</td>
        <td>{{idea.A}}</td>
        <td>{{idea.B}}</td>
    </tr>
</table>

这是我将 NavController 链接数组更改为:

$scope.links = [
    {'name':'About', //title that will be displayed on the link
    'URL': '#/about', //URL/view that the link will lead to/show
    'show':'(not actually a filter here)' //view may simply change so some info is hidden or revealed
    },
    {'name':'Active',
    'URL': '#/active',
    'show': {'active': true}  //unsure if this needs to be 'active' or active without quotes; in the DataFactory, it's in quotes
    },
    {'name':'Complete',
    'URL': '#/active',
    'show':{'active': false}
    }
];

Answer 1

你很接近。你没有显示你的 ng-repeat 但基本上你只是想确保你正确地为 uniqueFilter 设置了你的措辞......

{   'name':'Active',
    'URL': '#/active',
    'show': { active:true } // <-- this is what you'd pass to your "filter:" expression
},
{   'name':'Complete',
    'URL': '#/active', 
    'show': { active:false } // <-- this is what you'd pass to your "filter:" expression
}

所以基本上你的 ng-repeat 看起来(有点像)它传递了过滤器需要使用 bool 值的工作。

<li ng-repeat="item in items | filter: uniqueFilter">

// which for example would translate into:
<li ng-repeat="item in items | filter:{value:true}"> // or
<li ng-repeat="item in items | filter:{value:false}"> 
// allowing it to work with boolean values