腾讯云开发者社区-腾讯云

开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

xingoo, 一个梦想做发明家的程序员

专栏作者

805

文章

903374

阅读量

80

订阅数

基于AngularJS的过滤与排序

angularjs 小程序

前面了解了AngularJS的使用方法，这里就简单的写个小程序，实现查询过滤以及排序的功能。本程序中可以了解到：　　1 angularjs的过滤器　　2 ng-repeat的使用方法　　3 控制器的使用　　4 数据的绑定　　程序设计分析　　首先，如果要是先查询过滤，就要使用到AngularJS中的过滤器filter 了。　　直接在表达式的后面使用管道命令符 | ，按照下面的写法就可以达到一个过滤的效果： {{ persons | filter:query }} 　　通过使用

2018-01-17

2.2K0

前端开发总览

记录前端学习历程 kissy UI JavaScript 　　1 funtion方法的高级特性　　2 图解闭包　　3 JS面向对象高级特性　　4 DOM 四个常用的方法　　5 DOM 相册实现点击加载图片　　6 编写兼容性代码　　7 addLoadEvent解析　　8 Ajax与DOM实现动态加载　　9 创建博客园导航菜单　　10 使用DOM动态创建标签 Html CSS Dojo JQuery BootStrap AngularJS 　　学习资料：慕课网AngularJS实战

2018-01-17

8760

【AngularJS】—— 2 初识AngularJs（续）

angularjs bootstrap html

前一篇了解了AngularJS的一些简单的使用，这里继续跟着w3c学习一下剩下的内容。　　本篇根据w3cschool.cc继续学习AngularJS剩余的内容，包括：　　1 事件　　2 模块　　3 表单　　4 数据验证　　5 bootstrap CSS风格　　6 include包含其他页面　　7 应用程序　　8 参考手册　　首先看一下html的事件　　关于html的事件，文中给出了三个例子，点击、隐藏、显示。使用方法基本相同：　　先看一下点击的例子，点击按钮后，会触发ng-clic

2018-01-17

2.2K0

【AngularJS】—— 5 表单

angularjs html5 html

这部分，我们写一个表单程序，使用angularjs的检测并完成表单属性的获取与拷贝。　　在AngularJS中，也支持html5中多种控件的自动检测，如：text、number、url、email、radio、checkbox等等。　　可以通过anuglar.copy()自动拷贝form表单的数据。　　代码参考如下： <!doctype html> <html ng-app> <head> <meta http-equiv="Content-Type" content=

2018-01-17

8040

【AngularJS】—— 4 表达式

前面了解了AngularJS的基本用法，这里就跟着PDF一起学习下表达式的相关内容。　　在AngularJS中的表达式，与js中并不完全相同。　　首先它的表达式要放在{{}}才能使用，其次相对于javascript中的表达式概念，它有以下几点不同：　　1 作用域不同在javascript中默认的作用于是window，但是在angularJs中就不同了。它使用$scope控制作用于。　　2 允许未定义的值在angularjs中，如果使用了未定义的表达式，也不会出现错误，直接返回空值。　

2018-01-17

1.1K0

【AngularJS】—— 8 自定义指令

AngularJS支持用户自定义标签属性，在不需要使用DOM节点操作的情况下，添加自定义的内容。前面提到AngularJS的四大特性：　　1 MVC 　　2 模块化　　3 指令　　4 双向数据绑定下面将会介绍如下的内容： 1 如何自定义指令　　2 自定义指令的使用　　3 自定义指令的内嵌使用　　如何自定义指令：　　Angular是基于模块的框架，因此上来肯定要创建一个自己的模块： var myAppModule = angular.module("myApp",[

2018-01-17

7830

【AngularJS】—— 10 指令的复用

前面练习了如何自定义指令，这里练习一下指令在不同的控制器中如何复用。　　—— 来自《慕课网指令3》　　首先看一下一个小例子，通过自定义指令，捕获鼠标事件，并触发控制器中的方法。　　单个控制器的标签指令　　依然是先创建一个模块 var myAppModule = angular.module("myApp",[]); 　　在模块的基础上，创建控制器和指令 myAppModule.controller("myAppCtrl",["$scope",function($scop

2018-01-17

6860

【AngularJS】—— 9 自定义过滤器

AngularJS另一个特点就是提供了过滤器，可以通过操作UNIX下管道的方式，操作数据结果。　　通过使用管道，可以便于双向的数据绑定中视图的展现。　　过滤器在处理过程中，将数据变成新的格式，而且可以使用管道这种链式风格，还能接受附加的参数。　　实现方式　　下面看一下如何定义声明一个过滤器，首先依然是要创建我们自己的模块myAppModule var myAppModule = angular.module("myApp",[]); 　　接下来在模块的基础上，创建过滤器： myAppModul

2018-01-17

6250

【AngularJS】—— 11 指令的交互

前面基本了解了指令的相关内容：　　1 如何自定义指令　　2 指令的复用本篇看一下指令之间如何交互。学习内容来自《慕课网指令3》背景介绍　　这例子是视频中的例子，有一个动感超人，有三种能力，力量strength，速度speed，发光light。　　这三种能力作为三种属性，定义动感超人作为一个标签，只要添加对应的属性就能拥有该能力。　　为了便于结果的展示，为标签添加鼠标的响应事件，当鼠标移动到对应的标签上就会触发一个方法，打印出具备的能力。　　程序分析　　html部分的代码如下

2018-01-17

6150

【AngularJS】—— 12 独立作用域

前面通过视频学习了解了指令的概念，这里学习一下指令中的作用域的相关内容。通过独立作用域的不同绑定，可以实现更具适应性的自定义标签。借由不同的绑定规则绑定属性，从而定义出符合更多应用场景的标签。本篇将会总结下面的内容：　　1 为何需要独立作用域　　2 如何实现独立作用域　　3 作用域的数据绑定之前有一些错误，是由于replace拼写错误导致的。拼写正确后，网友发现报错，无法正常工作。这是因为模板中存在单标签<br>，导致模板无法正确解析~ 再次感谢博友们提出的错误！独立作

2018-01-17

1.3K0

【AngularJS】—— 13 服务Service

在AngularJS中有很多的服务，常用的比如$http,$location等等。本篇文章会介绍一下的内容：　　1 $http这种Angular提供的服务的使用　　2 如何自定义服务，并总结服务需要注意的几个小点。　　$http的使用　　AngularJS为我们提供了很多种服务，$http用于发送http请求，动态的请求数据。　　这样就需要使用web容器来运行代码了，先看看程序源码，视图方面还是跟普通的代码相同： <div ng-controller="myAppCtrl">

2018-01-17

1.4K0

AngularJS API之toJson 对象转为JSON

toJson()能把对象序列化为json 方法讲解这个方法最多支持2个参数： angular.toJson(obj, pretty); obj 是想要转换的对象， pretty 可以调节格式化的样式，按照API的介绍这个是空格的个数。(不过在控制台，空格的个数是一样的，差别还在研究) 样例参考 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="h

2018-01-17

1.2K0

AngularJS API之copy深拷贝

angular提供了一个可以复制对象的api——copy(source,destination)，它会对source对象执行深拷贝。使用时需要注意下面几点：如果只有一个参数（没有指定拷贝的对象），则返回一个拷贝对象如果指定了destination,则会深拷贝对象复制给destination 如果source是null或者undefined，那么会直接返回source 如果source就是desitination，那么会报错。下面看看使用样例： <html> <head> <meta h

2018-01-17

5600

AngularJS API之isXXX()

Angular中保存了很多的判断方法，可以用来验证对象是否符合某种要求，详细的参考代码样例即可 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script> </head> <body ng-app="myApp">

2018-01-17

4500

AngularJS API之bootstrap启动

对于一般的使用者来说，AngularJS的ng-app都是手动绑定到某个dom元素。但是在一些应用中，这样就显得很不方便了。绑定初始化通过绑定来进行angular的初始化，会把js代码侵入到html中，但是对于新手使用来说，还是足够了！ <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="http://apps.bdimg.com/libs/

2018-01-17

6560

AngularJS 技术总结

学习AngularJS,并且能在工作中使用到，算是很幸运了。因此本篇也会搜集各种资料，进行分享。书籍分享 AngularJS权威指南常用链接 AngularJS API文档 AngularJS 用户手册文档博客整理 1 初识AngularJs 2 初识AngularJs（续） 3 我的第一个AngularJS小程序 4 表达式 5 表单 6 过滤与排序 7 模块化 8 自定义指令 9 自定义过滤器 10 指令的复用 11 指令的交互 12 独立作用域 13 服务Servic

2018-01-17

8040

AngularJs ng-route路由详解

本篇基于ng-route来讲下angular中的路由，路由功能主要是 $routeProvider服务与 ng-view 实现。 ng-view的实现原理，是根据路由的切换，动态编译html模板——$compile(html)(scope)。更多内容参考：Angularjs总结前提首先需要在页面引入angular和angular-route，注意要在angular-route之前引入angular <script src="../../bower_components/angular/an

2018-01-17

1.9K0

AngularJS API之equal比较对象

使用情况 1 首先，所有满足 a === 3 这种的对象，在angular.equals(a,b)中都会返回真 2 所有对象的类型，以及属性值都相同的，也会返回真 3 NaN和NaN也会返回真（在javascript中，返回的是假） 4 正则也会返回真（在javascirpt，/abc/ /abc/被认为是不相等的）样例 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <

2018-01-17

6530

AngularJS API之extend扩展对象

angular.extend(dst,src)，在我实验的1.2.16版本上是支持深拷贝的。但是最新的API显示，这个方法是不支持深拷贝的。另外，第二个参数src支持多个对象。第一种使用方式 var user3 = angular.extend(user1,user2); 会把user2的所有属性都拷贝到user1上，并且把user1复制给user3 第二种使用方式 var user3 = angular.extend({},user1,user2); 这种使用方式，会保留原始对象，把user1

2018-01-17

6890

AngularJS API之$injector ---- 依赖注入

在AngularJS中也有依赖注入的概念，像spring中的依赖注入，但是又有所不同。Spring中使用构造注入或者设值注入的方式，还需要做一些额外的操作，但是angular中只需要在需要的地方声明一下即可，类似模块的引用，因此十分方便。参考：[angular api doc] (http://docs.angularjs.cn/api/auto/service/$injector) 推断式注入这种注入方式，需要在保证参数名称与服务名称相同。如果代码要经过压缩等操作，就会导致注入失败。 a

2018-01-17

8990

点击加载更多

社区活动

RAG七天入门训练营

鹅厂大牛手把手带你上手实战

Python精品学习库

代码在线跑，知识轻松学

博客搬家 | 分享价值百万资源包

自行/邀约他人一键搬运博客，速成社区影响力并领取好礼

技术创作特训营·精选知识专栏

往期视频·千货材料·成员作品最新动态