展开

关键词

AngularJS的数据绑定功能展示

在AJAX型的单页应用普及之前,类似Rails、PHP和JSP之类的平台都可以帮助我们创建用户界面(UI),它们会把HTML字符串和数据混合起来,然后再发送给用...

26280

新增搜索功能

给hugo添加搜索功能 当文章数量太多了以后,寻找文章如果只靠标签,分类,和归档是不太容易的,尤其是对标签和分类有哪些标签,划分是否合理不清楚的话,更无法的去定位到相关的文章,所以添加一个搜索功能是必须的 方式 有许多第三方的服务提供了搜索功能,如 algolia就提供了站内搜索功能 使用node js的一些模块也可以实现 根据hugo生成的静态资源,通过js进行匹配 推荐第三种方式 为了防止增加网站的配置项和保持独立不引用其他语言的情况 ,第三种方式是最好的方法,当然效果比前两中更差些,所谓有舍有得 实现 参考文章 : 给Hugo站点添加搜索功能

26762
  • 广告
    关闭

    【玩转 Cloud Studio】有奖调研征文,千元豪礼等你拿!

    想听听你玩转的独门秘籍,更有机械键盘、鹅厂公仔、CODING 定制公仔等你来拿!

  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    AngularJS】 # AngularJS入门

    AngularJS 扩展了 HTML AngularJS 通过 ng-directives扩展了HTML ng-app 指令定义一个 AngularJS 应用程序。 若不声明,将直接显示表达式。 AngularJS指令 通过 指令 来扩展HTML。通过内置的指令来为应用添加功能,可以自定义指令。 指令带有前缀 ng- ng-app指令用来初始化一个 AngularJS应用程序 3.1. AngularJS 服务(service) 在 AngularJS 中,服务是一个函数或对象,可在 AngularJS 应用中使用。 7.1. AngularJS 选择框(select) AngularJS 可以使用数组或对象创建一个下拉列表选项。 8.1. AngularJS HTML DOM AngularJS 为 HTML DOM 元素的 属性 提供了绑定应用数据的指令。

    7060

    带你走近AngularJS - 基本功能介绍

    带你走近AngularJS系列: 带你走近AngularJS - 基本功能介绍 带你走近AngularJS - 体验指令实例 带你走近AngularJS - 创建自定义指令 -------------- 本文专注于AngularJS 指令的使用,在我们进入主题之前,我们将快速浏览AngularJS的基本用法。 AngularJS 不仅仅是一个类库,而是提供了一个完整的框架。 了解AngularJS的开发人员,你肯定会为AngularJS自定义指令(它的功能相当于.NET 平台下的自定义控件)功能感到兴奋。自定义指令允许你扩展HTML标签和特性。 加载后,它会在文档中搜索ng-app 特性。 这是一个功能简单的指令,在后续的章节将展示如何创建一些复杂指令。

    306100

    angularJs中筛选功能-angular.filter-1

    phone:‘555-4321’} ] {{friendObj.name}} {{friendObj.phone}} <–result John 555-1276 –> Date https://docs.angularjs.org

    38440

    简易搜索功能小记

    简易搜索功能小记 自从上个版本软件中加入了列表的搜索功能,现在是个列表的地方产品都要给提供搜索。 @_@ 类似联系人、短信或者文件等的集合数据,用户输入关键字,然后根据标题或者内容文本去匹配。 搜索相关的问题: 发起搜索。 本地搜索。 请求服务器进行搜索。 同步搜索(单线程)。 异步搜索(多线程)。 结果分页加载。 要点1:发起搜索 搜索功能第一步就是处理用户输入,然后发起搜索。 有两种: 1、输入内容后点击搜索按钮发起搜索 这种交互比较简单,用户主动点击按钮进行搜索,可以点击返回进行取消,新的搜索请求自动取消之前的请求等。 2、输入过程中自动发起搜索 类似网页中常见的搜索功能,在输入关键字过程中会即时显示对应的搜索结果,无需等待输入完毕后主动发起搜索。 要点2:异步搜索 搜索比较耗时时,如网络在线搜索,或者文件查找等,都是要考虑异步进行搜索逻辑的执行的。 如果搜索逻辑是同步执行的,那么每次发起搜索到显示搜索逻辑是一个完整的过程——没有打断。

    34300

    AngularJS】—— 1 初识AngularJs

    怀着激动与忐忑的心情,开始了学习AngularJS的旅程,很久之前就听说了这个前端框架,但是由于自己一直没有从事相关的工作,因此也没有进行学习。 这次正好学习AngularJS,直接复习一下前端的知识。目前这里还是弱点,慢慢深入的学习。   AngularJS是Google的优秀的前端框架,目前已经应用于多个产品。    AngularJs相对于其他的框架来说,有一下的特性:   1 MVVM   2 模块化   3 自动化双向数据绑定   4 语义化标签   5 依赖注入   由于很多概念都不了解,这些特性也无法理解。 通过简单的学习,大致了解了AngularJS的语法以及使用,包括如下的内容: 1 表达式   支持普通的JS表达式,表达式通过{{}}使用。 p>姓名:<input type="text" ng-model="firstName">

    你输入的为: {{ firstName }}

      ng-app 定义AngularJS

    27090

    小程序引入搜索框实现搜索功能

    业务描述 在小程序中我们查询数据量较大较多时候需要对查询条件进行限制从而筛选数据 这个时候我们就需要用一个搜索框的功能来实现搜索数据的功能 实现步骤 引入vant搜索框组件 在page.json页面引入组件 van-button": "@vant/weapp/button/index", "van-search": "@vant/weapp/search/index" }, 页面使用组件 在wxml页面中使用该搜索组件

    20020

    小程序搜索弹出搜索内容功能(模糊查询)

    功能:在搜索界面,搜索输入的字符,如果有匹配,就会显示出来。 ? -- 搜索列表 --> <view class="weui-cell__bd" wx:for="{{list}}" wx:key="key"> <! display: inline-block; width: 140rpx; height: 142rpx; background: #fd9903; } /* end */ /* 搜索 inputShowed: true, //显示结果view的状态 viewShowed: false, // 搜索框值 inputVal: "", // 搜索渲染推荐数据 catList: [], btnWidth: 300, //删除按钮的宽度单位 startX: "", //收支触摸开始滑动的位置 }, onLoad

    2.9K20

    Element Table 增加搜索功能

    我们经常会用到搜索,可以使用计算属性:  <! -- 表格搜索框 --> <el-input v-model="searchContent" placeholder="<em>搜索</em>1" size=" el-table-column> <el-table-column prop="address" label="地址"></el-table-column> </el-table> //搜索数据 }); } else { items1 = items; } return items1; } } 但是如果有多个table都要搜索 }); }); } else { items1 = items; } return items1; }, 总结:单个表格搜索可以使用计算属性

    4.1K20

    AngularJS】—— 2 初识AngularJs(续)

    前一篇了解了AngularJS的一些简单的使用,这里继续跟着w3c学习一下剩下的内容。    本篇根据w3cschool.cc继续学习AngularJS剩余的内容,包括:   1 事件   2 模块   3 表单   4 数据验证   5 bootstrap CSS风格   6 include包含其他页面 $scope.myVar; }; } </script>   关于AngularJS的模块   模块定义了用户的应用,所有的控制器属于一个模块。之前使用的ng-app就是模块的定义。    src="myCtrl.js"></script> </body>   对于控制器,也可以通过模块来定义声明: <head> <script src="//www.w3cschool.cc/try/<em>angularjs</em> 关于<em>AngularJS</em>表单   表单是web中重要的组成部分,如下面样例所示,可以很方便的获取到form中的数据 <div ng-app="" ng-controller="formController

    34180

    AngularJS

    scope:单个controller的作用域。可以直接在某controller下的页面引用scope下的变量 rootScope:多个controller作...

    28330

    django 实现简单的搜索功能

    搜索是一个复杂的功能,但对于一些简单的搜索任务,我们可以使用 django model 层提供的一些内置方法来完成。 本文将结合 django 模型管理器的 filter 方法和 icontains 查询表达式来实现一个简单的搜索功能。 以博客为例,博客文章通常包含标题和正文两个部分。 当用户输入某个关键词进行搜索后,我们希望为用户显示标题中含有被搜索关键词的全部文章。 urls.py urlpatterns = [ # 其他 url 配置 url(r'^search/$', views.search, name='search'), ] ---- 当然这样的搜索功能是非常简略的 使用它我们可以实现更加复杂的搜索功能,比如全文检索、按搜索相关度排序、关键字高亮等等类似于百度搜索功能功能十分强大。

    7.8K80

    QML 用QSortFilterProxyModel实现搜索功能

    engine->load(QUrl(QLatin1String("qrc:/main.qml"))); return app.exec(); } qml部分的代码: Search是自己写的一个搜索框 findBookDialog onSearch: { proxyModel.filterRole=range;//这个filterRole是proxyModel搜索的范围 ,也就是指定BookModel中的一个属性 proxyModel.setFilterFixedString(text);//设置搜索内容 bookView.model =proxyModel;//设置展示的内容为搜索筛选后的 } onRejected: {//取消时显示原来的内容 bookView.model=bookModel

    52410

    AngularJS XMLHttpRequest

    $http 是 AngularJS 中的一个核心服务,用于读取远程服务器的数据。 $http.delete $http.jsonp $http.patch 读取 JSON 文件 以下是存储在web服务器上的 JSON 文件: https://www.runoob.com/try/angularjs $http AngularJS $http 是一个用于读取web服务器上数据的服务。 通用方法实例 AngularJS1.5 以上版本 - 实例 var app = angular.module('myApp', []); app.controller('siteCtrl', AngularJS 应用通过 ng-app 定义。应用在

    AngularJs(3)

    <script type="text/javascript" src="angular.min.js"></script>

    21220

    AngularJS 模块

    现在你可以在 AngularJS 应用中添加控制器,指令,过滤器等。 提供了很多内置的指令,你可以使用它们来为你的应用添加功能。 完整的指令内容可以参阅 AngularJS 参考手册。 在我们的多个 AngularJS 实例中,您将看到 AngularJS 库是在文档的 <head> 区域被加载。 另一个解决方案是在 <body> 元素中加载 AngularJS 库,但是必须放置在您的 AngularJS 脚本前面: AngularJS 实例 <!

    9620

    angular使用管道实现搜索功能

    之前在没学精angular的时候,想实现搜索功能的时候,总是想着从数据库里获取搜索的结果,可殊不知,原来在angular中只需要简单的几行代码就实现了最常用的搜索功能. filterField] console.log(val); return val >=keyword }); } } 这个过滤需要两个参数,第一个参数:是依据哪个参数来搜索

    1.4K60

    扫码关注腾讯云开发者

    领取腾讯云代金券