过滤器（filter）正如其名，作用就是接收一个输入，通过某个规则进行处理，然后返回处理后的结果。 主要用在数据的格式化上，例如获取一个数组中的子集，对数组中的元素进行排序等。...除此之外还可以自定义过滤器，这个就强大了，可以满足任何要求的数据处理。 过滤器的内容非常简单，只要明白了内置的如何使用，自己如何定义一个filter就OK了 一、filter的两种使用方法 1....的输出将作为下一个filter的输入（怪不得这货长的跟管道一个样。。）...ng提供了八种描述性的字符串，个人觉得这些有点多余，我完全可以根据自己的意愿组合出想要的格式，不愿意去记这么多单词~ 3. filter(匹配子串) 这个名叫filter的filter（不得不说这名字起的...三、自定义过滤器 filter的自定义方式也很简单，使用module的filter方法，返回一个函数，该函数接收输入值，并返回处理后的结果。话不多说，我们来写一个看看。
以下介绍为自己在使用angular-filter时，简单总结的用法。...本身外，在引用angular-filter.js（或者angular-filter.min.js）在你的项目index.html中； 3.添加‘angular.filter’依赖项； 当你做完这些，...doctype html> ... ... filter 从数组中选取一个子集，并将其返回成一个新的数组； 用法： // html中：{{ collection | filter : expression...: comparator}} // js中：$filter(‘filter’)(array, expression, comparator) 参数：array：想筛选的数组 expression：用于从数组中筛选的条件...phone:‘555-4321’} ] {{friendObj.name}} {{friendObj.phone}} <–result John 555-1276 –> Date https://docs.angularjs.org
AngularJS简介 AngularJS是一个JavaScript框架，用js编写的库 <script src="https://cdn.staticfile.org/angular.js/1.4.6...<em>AngularJS</em>表达式 <em>AngularJS</em> 使用 表达式 把数据绑定到 HTML 使用{ { 表达式 }}进行数据<em>的</em>输出 表达式可以包含字符，操作符，变量 表达式可以写在HTML中 不支持条件判断，...<em>AngularJS</em> HTML DOM <em>AngularJS</em> 为 HTML DOM 元素<em>的</em> 属性 提供了绑定应用数据<em>的</em>指令。...<em>AngularJS</em> 输入验证 form<em>的</em>name.input<em>的</em>name....<em>AngularJS</em> 路由通过 #! + 标记 区分不同<em>的</em>逻辑页面并将不同<em>的</em>页面绑定到对应<em>的</em>控制器上。 创建了两个 URL： /first 和 /second。每个 URL 都有对应<em>的</em>视图和控制器。
怀着激动与忐忑的心情，开始了学习AngularJS的旅程，很久之前就听说了这个前端框架，但是由于自己一直没有从事相关的工作，因此也没有进行学习。...这次正好学习AngularJS，直接复习一下前端的知识。目前这里还是弱点，慢慢深入的学习。 AngularJS是Google的优秀的前端框架，目前已经应用于多个产品。 ...AngularJs相对于其他的框架来说，有一下的特性： 1 MVVM 2 模块化 3 自动化双向数据绑定 4 语义化标签 5 依赖注入 由于很多概念都不了解，这些特性也无法理解。...通过简单的学习，大致了解了AngularJS的语法以及使用，包括如下的内容： 1 表达式 支持普通的JS表达式，表达式通过{{}}使用。...价格： 总价 = {{ (quantity * price) | currency }} filter
前一篇了解了AngularJS的一些简单的使用，这里继续跟着w3c学习一下剩下的内容。 ...本篇根据w3cschool.cc继续学习AngularJS剩余的内容，包括： 1 事件 2 模块 3 表单 4 数据验证 5 bootstrap CSS风格 6 include包含其他页面...$scope.myVar; }; } 关于AngularJS的模块 模块定义了用户的应用，所有的控制器属于一个模块。之前使用的ng-app就是模块的定义。 ...关于AngularJS表单 表单是web中重要的组成部分，如下面样例所示，可以很方便的获取到form中的数据 <div ng-app="" ng-controller="formController...html标签可用 ng_init 初始化数据 ng_model 绑定应用程序数据 ng_repeat 实现循环 ng_show 显示html标签 currency 转换成货币 <em>filter</em>
type="text/javascript" src="angular-route.min.js"> //在模块中的[...//:num获取传递过来的参数 .when('/aaa/:num',{ template : '首页的内容`name`', controller : 'one'...}) .when('/bbb',{ template : '分页一的内容`name`', controller : 'two' }) .when('/ccc.../:num',{ template : '分页二的内容`name`', controller : 'three' }) //设置默认值 .otherwise(...$location=$location; //可以获取传递过来的参数 console.log($routeParams); }]); myApp.controller('two'
完整的指令内容可以参阅 AngularJS 参考手册。...AngularJS 模块让所有函数的作用域在该模块下，避免了该问题。 ---- 什么时候载入库? 在我们的实例中，所有 AngularJS 库都在 HTML 文档的头部载入。...在我们的多个 AngularJS 实例中，您将看到 AngularJS 库是在文档的 区域被加载。...在我们的实例中，AngularJS 在 元素中被加载，因为对 angular.module 的调用只能在库加载完成后才能进行。...另一个解决方案是在 元素中加载 AngularJS 库，但是必须放置在您的 AngularJS 脚本前面： AngularJS 实例 <!
$http 是 AngularJS 中的一个核心服务，用于读取远程服务器的数据。...$http AngularJS $http 是一个用于读取web服务器上数据的服务。...$http.get(url) 是用于读取服务器数据的函数。 废弃声明 (v1.5) v1.5 中$http 的 success 和 error 方法已废弃。使用 then 方法替代。...get 请求是本站的服务器，你不能直接拷贝到你本地运行，会存在跨域问题，解决办法就是将 Customers_JSON.php 的数据拷贝到你自己的服务器上，附：PHP Ajax 跨域问题最佳解决方案。...AngularJS 应用通过 ng-app 定义。应用在 中执行。 ng-controller 指令设置了 controller 对象 名。
1.scope 与 rootScope scope：单个controller的作用域。...可以直接在某controller下的页面引用scope下的变量 rootScope：多个controller作用域的桥梁。...可以直接在全局页面引用rootScope下的变量 举例： $rootScope.name = '小明'; $scope.name = '小明';//和$rootScope同名可以使用$root <div...注意事项——针对同一链接，在当前页面保存用户名等信息，在新的tab页打开就失效了。localStorage不会。 localStorage：不主动清除，不会失效。
大漠老师的路由理解 ---- 首先新建一个基础的html,其中有些内容是固定的，固定的内容的可以有如home的超链接， 有些是可以插入模板如含有ui-view...的div 如果是home页面，只要加入home页面的模板即可如下 $stateProvider .state('home',... templateUrl: 'tpls2/home.html' }) 如进入home页面后还有子页面，即在home页面某处点击进入子页面，以list为例：在home模板的页面上也有些固定的内容...，也有可插入模板的div,home模板的链接要写成 List...home-list模板 关于about页面，about模板，about模板里面又含有左列和右列的模板，当about模板及内嵌的左列和又列的模板都加进去后才是一个完整的about页面 .state
angularjs内置了常用的表单验证指令，比如min，require等。下面是演示： <!...我们也可以自定义一个验证指令，比如验证电话号码的。
AngularJs是不直接操作DOM的，但是在平时的开发当中，我们有的时候还是需要操作一些DOM的，如果使用原生的JS的话操作过于麻烦，所以大家一般都是使用jQuery，jQuery虽然好用，但是AngularJs...是不建议和JQuery同时使用的，所以AngularJs给我们也提供了一些操作DOM的方法———Jqlite 查阅官方提供的api，可以看到使用方法是angular.element(ele)...②、querySelectorAll返回匹配的元素集合，如果没有匹配项，返回空的nodelist(节点数组)。 ③、返回的结果是静态的，之后对document结构的改变不会影响到之前取到的结果。 ...DOCTYPE html> AngularJS入门学习 AngularJS入门学习</title
大家好，又见面了，我是你们的朋友全栈君。 AngularJS路由问题解决 遇到了一个棘手的问题：点击优惠详情时总是跳转到药店详情页面中去。...其中药店详情和优惠券详情的url是相同的。而之前自己在优惠活动详情中改动了一下，结果正常显示。.../{yhid}’, views: { //注意这里的写法，当一个页面上带有多个ui-view的时候如何进行命名和视图模板的加载动作 ”: { templateUrl...，基于用户浏览该应用所在的状态。.../{yhid}’, views: { //注意这里的写法，当一个页面上带有多个ui-view的时候如何进行命名和视图模板的加载动作 ”: { templateUrl
最近在开发过程中，发现一个问题，在使用angularjs的ng-repeat遍历过程中，如果遍历的数组中包含相同的项，则会抛错。 如下例： <!...Repeater: item in ages, Duplicate key: number:25, Duplicate value: 25 解决方案：在对应的ng-repeat指令中增加
三、$http 中的缓存 Angular的 $http 服务创建了一个带有ID为 $http 的缓存。...3.1 默认的 $http 缓存 当数据不会经常改变时，默认的 $http 缓存就特别有用了。...这个$http 缓存中的请求键就是完整的URL路径。...如果需要，也可以操作这个默认的 $http 缓存（比如，如果我们发起的另外一个没有缓存的请求提醒我们发生了增量变化，我们就可以在默认的 $http 请求中清除这个请求）。...，比如检索已缓存的响应，从缓存中清除条目，或者消除所有缓存的引用。
+ 1" ng-init="count=0"/> {{count}} 定义和用法 ng-blur 指令用于告诉AngularJS...AngularJS ng-change 指令指令不会覆盖原生的 onchange 事件, 如果触发该事件，ng-change 表达式与原生的 onchange 事件都会执行。 ...+ 1" ng-init="count=0">OK 定义和用法 ng-click 指令告诉了AngularJS HTML 元素被点击后需要执行的操作...应用在加载时防止AngularJS 代码未加载完而出现的问题。 ...text"> 定义和用法 ng-copy 指令用于告诉AngularJS在HTML 元素文本被拷贝时要执行的操作。
AngularJS过滤器可用于转换数据： currency 格式化数字为货币格式 filter 从数组中选着应子集。 ...服务(Service) AngularJS 中你可以创建自己的服务，或使用内创建服务。...$http 是AngularJS 应用中最常用的服务。服务向服务器发送请求，应用响应服务器传送过来的数据。 ...$http 服务 $http 是AngularJS 应用中做常用的服务。服务像服务器发送请求。应用响应服务器传递过来的数据。 ...XMLHttpRequest $http 是AngularJS 中的一个核心服务，用于读取远程服务器的数据。
本章节我们将为大家介绍 AngularJS 路由。 AngularJS 路由允许我们通过不同的 URL 访问不同的内容。...通过 AngularJS 可以实现多视图的单页 Web 应用（single page web application，SPA） 注意 Angular1.6 之前的版本是通过# + 标记实现路由。...当我们点击以上的任意一个链接时，向服务端请的地址都是一样的 (http://runoob.com/)。 因为 #! 号之后的内容在向服务端请求时会被浏览器忽略掉。 所以我们就需要在客户端实现 #!...号后面内容的功能实现。 AngularJS 路由就通过 #! + 标记 帮助我们区分不同的逻辑页面并将不同的页面绑定到对应的控制器上。...4、配置 $routeProvider，AngularJS $routeProvider 用来定义路由规则。
---- AngularJS 全局 API AngularJS 全局 API 用于执行常见任务的 JavaScript 函数集合，如： 比较对象 迭代对象 转换对象 全局 API 函数使用 angular...以下列出了一些通用的 API 函数： API 描述 angular.lowercase (<angular1.7）angular....$$uppercase()（angular1.7+） 转换字符串为大写 angular.isString() 判断给定的对象是否为字符串，如果是返回 true。...angular.isNumber() 判断给定的对象是否为数字，如果是返回 true。...注意：自 AngularJS 1.7 之后移除 angular.lowercase 和 angular.uppercase 方法, 改为 angular.$$lowercase 和 angular.
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
