`

angularJS 搜索框

阅读更多
1、页面
<div class="search-box">
    <form name="searchForm" novalidate ng-keyup="applyGlobalSearch()">
        <button class="btn" type="submit" ng-disabled="searchForm.$invalid"><i class="fa fa-search"></i></button>
        <input type="text" class="form-control" autocomplete="off" maxlength="128" name="searchTerm" ng-model="globalSearchTerm" placeholder="搜索" />
     </form>
</div>

2、js
self.applyGlobalSearch = function(){
    var term = self.globalSearchTerm;
    self.volumesTable.filter({$:term});
  };
分享到:
评论

相关推荐

    Angularjs material 实现搜索框功能

    angular-material 是 AngularJS 的一个子项目,用来提供实现了 Material Design 风格的组件。 Material 提供了大量的android 风格的UI组件,使用 angularjs + Material 可以很容易开发出风格接近原生 Android 5.x 的...

    angularjs自定义select搜索查找插件

    在本文中,我们将深入探讨如何使用AngularJS来创建一个自定义的Select组件,该组件具有选项自定义和搜索查找功能。AngularJS是一个流行的JavaScript框架,它提供了强大的数据绑定和依赖注入机制,使得构建动态Web...

    基于ElasticSearch的Angularjs联想框功能实现.pdf

    在实现联想框功能时,我们需要使用ElasticSearch的搜索引擎来索引大量数据,然后使用Angularjs的directive结构来实现联想框的展示。通过这种方式,我们可以实现实时快速、稳定、可靠的搜索目的,提高用户体验。 在...

    AngularJS学习 chm 文件

    AngularJS,是由Google维护的开源JavaScript框架,用于构建单页应用程序(SPA)。它极大地扩展了HTML的功能,使得在客户端能够更高效地处理数据和逻辑,提供了丰富的开发工具和API,帮助开发者构建动态、交互性强的...

    angularjs -plugin

    **AngularJS插件详解** AngularJS,作为一款强大的前端JavaScript框架,极大地简化了网页应用的开发,特别是对于构建单页应用程序(SPA)。AngularJS插件是开发者在集成开发环境(IDE)中提升AngularJS项目开发效率...

    angularjs+nodejs例子

    这个"angularjs+nodejs"示例项目,书虫(bookworm)可能是一个阅读应用,涉及到用户登录、书籍列表展示、详情查看、搜索等功能,展示了如何利用这两个强大的技术栈构建一个完整的Web应用。通过学习这个例子,开发者...

    AngularJS--angular-phonecat

    在angular-phonecat教程中,这体现在用户界面和应用程序数据间的实时互动上,例如搜索手机时的实时过滤功能。 2. **指令**:AngularJS提供了一种扩展HTML的能力,通过自定义指令可以添加新的DOM操作。在angular-...

    前端项目-angularjs-dropdown-multiselect.zip

    3. **搜索过滤**:内置搜索框允许用户输入关键词快速筛选所需选项,提高查找效率。 4. **分组展示**:如果数据源包含层次结构,可以自动或手动进行分组显示,使信息结构清晰。 5. **自定义模板**:允许开发者根据...

    angularjs表格内容搜索过滤代码.zip

    在这个例子中,当用户在搜索框输入内容时,这个输入值会自动与表格中的数据进行比较,实现数据的筛选和过滤。 其次,`ng-repeat`指令用于遍历数组并生成表格行。在搜索过滤功能中,`ng-repeat`会结合过滤器(filter...

    angularjs实现分页和搜索功能

    在本示例中,我们将探讨如何使用AngularJS框架来实现分页和搜索功能。AngularJS是一个流行的前端JavaScript框架,它提供了强大的数据绑定和依赖注入机制,使得开发动态Web应用变得更加简单。 首先,我们看到HTML...

    MovieCat用angularjs写的一个前端网页

    "MovieCat"是一个基于AngularJS的前端应用,旨在提供电影分类、展示和搜索功能。这个项目展示了如何利用AngularJS的特性来创建一个动态且交互性强的网页。通过这个项目,我们可以学习到如何构建动态视图、处理用户...

    AngularJS Admin Dashboard Theme

    AngularJS 1.3.x Bootstrap界面 AngularUI 6个不同的主题皮肤 无限的风格SASS 4层侧边栏菜单 100%充分响应 完全可定制的 可用文档 CSS3页面转换 加载栏 固定和默认标题布局 固定和默认页脚布局 固定和默认...

    AngularJS实现地区选择

    - 可能会用到AngularJS的内置过滤器,如`filter`,对地区列表进行筛选,比如根据用户输入的关键字进行搜索。 - 也可能创建自定义过滤器,用于排序或处理地区数据,使其更适合显示。 5. **表单控制**: - 利用`...

    angularjs中select2使用 demo

    在AngularJS中,Select2是一个流行的插件,它极大地增强了HTML `&lt;select&gt;` 元素的用户体验,提供了搜索、多选、分页等高级功能。这个"angularjs中select2使用demo"应该是一个示例项目,展示了如何在AngularJS应用中...

    根据省份查找高校的angularjs实现

    "高校定位"则意味着我们需要提供一种搜索功能,让用户能够快速找到特定的高校。这可以通过结合AngularJS的表单处理和过滤器(filter)来实现。用户输入的关键词可以与高校名称进行比较,过滤器将实时更新显示的高校...

    angularjs666操作手册

    - 在这类项目中,AngularJS可以用来实现商品列表展示、搜索过滤、购物车管理等功能。 - 数据绑定和依赖注入的特性使得状态管理和UI更新变得十分便捷。 2. **案例2:企业级管理系统** - 企业级管理系统往往需要...

    用AngularJS开发下一代web应用源码

    - **Ctrl+Shift+F全局搜索**:在Sublime中,这个快捷键可以打开全局搜索功能,允许你在整个项目中查找并替换特定的代码片段,对于理解大型项目结构和查找特定功能代码非常有用。 - **其他Sublime特性**:Sublime还...

    angularjs-pdf-master 在线预览

    6. 考虑交互性:为了提供更好的用户体验,可能还需要实现缩放、平移、书签、搜索等PDF文档的常见交互功能。这可以通过PDF.js提供的API来实现。 7. 移动优化:对于移动端应用,需要考虑屏幕尺寸和触摸操作。可以使用...

    AngularJS中文api chm格式.rar_angularjs

    CHM 格式是一种便携式的帮助文档格式,通常包含索引、搜索功能,方便快速定位和理解 AngularJS 的各种API、概念和使用方法。 在阅读这份手册时,你可以找到关于 AngularJS 的核心概念、指令、服务、过滤器、模块、...

Global site tag (gtag.js) - Google Analytics