使用 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] 语法错误：令牌“=”是意外的，期望 [:] 在表达式的第 12 列 [{ myFilter = { onlineTask : 'true' } }] 从 [= { 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 过滤器中设置所需的参数是实现您想要的效果的最佳方式。

您只需要记住：

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

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

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

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

参见示例：http://plnkr.co/edit/QOHNYHVPRJ8iBm3Adjcj?p=preview

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

dynamically change ng-repeat filter using params from ui-sref

parameters

angularjs

angularjs-ng-repeat

ui-sref