javascript - 具有特定锚定文本值的 AngularJS 搜索/查找/过滤 div

标签 javascript html angularjs

好的,事情是这样的:假设您有一个带有 a 标签的 div 列表,并且该标签中的 question 由一个是论坛上的display:block。您单击问题 - 它会将您带到正确的 View 或 wahetever。
重点是,您想通过在上面的表单输入中输入您的短语过滤这些问题。
您希望angular 过滤器仅显示divquestions 包含phrase 你是打字,只留下 View 中的那些,隐藏所有其他的,就像我们随处可见的简单列表一样。
这可能吗?
如何?

最佳答案

我会花时间回答这个问题,尽管到目前为止您在展示您的作品上付出了零努力。如果问题是通过 ng-repeat 生成的,您可以向其添加一个过滤器,它只会显示与文本输入的目标值匹配的问题。由于没有代码示例,我将在这里创建一个基本的示例。

Controller 对象:

$scope.produceItems= [ {id:"1", name:"Tomato"}, {id:"2", name:"Potato"}, {id:"3", name:"Lettuce"}, ... ];

HTML:

Search by name: <input type="text" ng-model="search.name">

<div ng-repeat="produce in produceItems | filter:search:true"> 
  <h1>{{produce.name}}</h1>
</div>

ng-model="search" 将在所有键中搜索匹配值并相应地显示在 ng-repeat 中。

使用 ng-model="search.color" 将只搜索匹配的颜色键,并只显示匹配的结果。

有大量关于 Angular 过滤器的文档。 https://docs.angularjs.org/api/ng/filter/filter

我已经更新了答案,以便更准确地模拟您在评论中描述的内容。

关于javascript - 具有特定锚定文本值的 AngularJS 搜索/查找/过滤 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33022844/

相关文章:

javascript - 新的 Office 2013 Javascript API 限制

javascript - 在 jquery ui DatePicker 上设置 'option' 清除文本框值?

javascript - 我怎样才能修复动画速度?

html - 设置没有底部滚动的溢出滚动

angularjs - 覆盖 Angular ui-router 以链接到页面 anchor

javascript - 测试 javascript 中 undefined variable /可能的 javascript bug?

javascript - 点击时动画进度条

javascript - 无法找到使用 JQuery 选择特定元素的方法

angularjs - AngularStrap 选项卡加载 html 片段

css - HTML5 : ng-show/hg-hide violating the grid position?