如何在 Angular.js 中从不同视图中搜索项目答案

【问题标题】：How to search items from different views in Angular.js如何在 Angular.js 中从不同视图中搜索项目
【发布时间】：2014-04-13 09:47:30
【问题描述】：

在我家：

.state('home',{
        url: '',
        views: {
           '': {
            templateUrl: 'views/main.html',
            controller:'MainCtrl'
           }
    ...

我循环浏览了一些书籍，也有一个简单的搜索字段来过滤项目：

<input type="text" ng-model="search">
<article class="items" ng-repeat="book in allBooks  | filter: search" >

这可行，但我想在侧边栏中添加输入文件，并将该侧边栏放在单独的视图中 - 这样我就不必在每个视图中复制它。所以在我的index.html 我有以下代码

 <div ng-include ng-controller="MainCtrl" src="'views/sidebar.html'" class="sidebar"></div>
 <div class="container" ui-view></div>

假设这是一个很好的做法，有没有办法在侧边栏内添加搜索输入字段，并且仍然可以在 home 状态下影响循环？

谢谢

【问题讨论】：

标签： javascript angularjs angularjs-ng-repeat angular-ui

【解决方案1】：

您可以将主状态设为侧边栏的嵌套视图。然后，您的过滤器在侧边栏视图中绑定到的 ng-model 将可用于主状态。当在自己的范围内找不到搜索属性时，主状态将委托给上述侧边栏范围。

这是我快速而肮脏的例子： http://plnkr.co/gmUaDLSfJxOL42EPZ9ak

【讨论】：