使用 ui-sref 中的参数动态更改 ng-repeat 过滤器

Question

所以我在我的 ng-repeat 列表中设置了一个自定义过滤器，我可以使用同一页面的不同按钮动态更改它。

我的问题是，如何使用页面外的值更改此过滤器。

澄清一下，我的“list.view.html”上有一个 ng-repeat 列表，我希望能够在我的主页上按下一个按钮，其中包含一个过滤器值，然后加载“list.view” .html' 过滤结果，包括我主页上按钮的参数。

为了进一步迭代，

在 list.view.html 上的 ng-repeat 上方，我包含如下按钮：

<button class="sortBy" ng-click="myFilter =  { statusOpen : true }">Open</button>

这将我的 ng-repeat 更新为仅包含 statusOpen 布尔值为 true 的项目。

这是我的 ng-repeat 中的过滤器

<li class="list-group-item animate-repeat" data-ng-repeat="task in vm.tasks | filter:search | filter:myFilter>

如何通过单击主页上的按钮来获得相同的结果，该按钮会路由到带有过滤结果的 list.view.html 页面？

我尝试在控制器中为 list.view.html 设置一个参数过滤器，但是我无法让它工作。

例如 <a ui-sref="tasks.list({ myFilter = { onlineTask : 'true' } })"> 在我的主页上和 :: 在我的 client.routes.js 上

 params: {
       myFilter: null
 }

控制台错误消息

angular.js:11706 错误：[$parse:syntax] 语法错误：令牌 '=' 是意外的，在表达式 [{ myFilter = { onlineTask : 'true' } }] 的第 12 列期待 [:] 开始在 [= { onlineTask : 'true' } }]。 http://errors.angularjs.org/1.3.20/$parse/syntax?p0=%3D&p1=is%20unexpected%2C%20expecting%20%5B%3A%5D&p2=12&p3=%7B%20myFilter%20%3D%20%7B"

我只是在寻找有关如何进行此操作的一般指导。

提前非常感谢

Answer 1

我认为在 angular-ui 过滤器中设置所需的参数是实现您想要的最佳方式。

你只需要记住：

1. 正确设置您的 URL（在 URL 中包含参数）并在您的控制器中使用 $stateParams 服务处理参数。如果您有多个过滤器，则可以使用数组：

   $stateProvider
   .state('search', {
     url: "/search/?myFilter",
     templateUrl: 'search.html',
     controller: function ($stateParams) {
     // Get filter(s)
      console.log($stateParams.myFilter);
     }
   })
   

2. 在ui-sref 中正确分配您的参数（使用冒号！）：

   <a ui-sref="filter({ myFilter: ['filter1','filter2'] })">Go and filter</a>

查看示例：http://plnkr.co/edit/QOHNYHVPRJ8iBm3Adjcj?p=preview