use*_*584 0 html javascript data-binding angularjs angularjs-filter
在我的项目早期,我无法隔离我的一些观点,并且必须直接在index.html中开发它们.具体来说,我的导航菜单.
现在我已经能够开始ng-include工作了,我想把我的菜单拉进nav.html.这完全没问题,但功能几乎完全符合预期.
但我的菜单中有一个搜索栏,不再起作用.最初,即使我的导航菜单直接在index.html内,它过滤的内容也在ng-view.我想要过滤的视图和导航都在同一个控制器下,我没有更改ng-view组件.但是现在我已经隔离了nav.html,搜索过滤器似乎不再具有约束力.
index.html:
...
<body>
<div ng-include="'views/nav.html'"></div>
<div ng-view></div>
...
</body>
...
nav.html:
<div class="nav">
<div ng-controller="NavController">
...
<div class="searchbar">
<input type="text" name="input" value="Search" ng-model="search" />
<!--ng-model="search" is the binding component, as I understand-->
</div> <!--end searchbar div-->
...
</div> <!--end NavController div-->
</div> <!--end nav div-->
table.html :(要过滤的内容ng-view)
<div ng-controller="NavController">
<table>
<tr class="title_bar">
<td>Title</td>
<td>A</td>
<td>B</td>
</tr>
<tr ng-repeat="item in listOfItems | filter:search">
<!--table rows should be filtered by the search-->
<td>{{item.title}}</td>
<td>{{item.A}}</td>
<td>{{item.B}}</td>
</tr>
</table>
</div>
我根本没有更改table.html,也没有更改nav.html.我只是将它分离到自己的html文件中,ng-include而不是直接将它放在那里.
有任何想法吗？我将不胜感激任何帮助.谢谢!
这可能是一个迟到的答案,但它可能有助于将来遇到这个问题的任何人:我最近发现,当使用ng-include包含包含输入字段的文件时,ng-repeat的过滤器似乎被破坏了.这是因为ng-include创建了一个新的(子)范围,您可以使用$ parent范围表示法来解决问题:
因此,nav.html中的输入字段应修改为如下所示:
<input type="text" name="input" value="Search" ng-model="$parent.search.$" />
| 归档时间： |
|
| 查看次数： |
935 次 |
| 最近记录： |