过滤器（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>
1.scope 与 rootScope scope：单个controller的作用域。...可以直接在某controller下的页面引用scope下的变量 rootScope：多个controller作用域的桥梁。...可以直接在全局页面引用rootScope下的变量 举例： $rootScope.name = '小明'; $scope.name = '小明';//和$rootScope同名可以使用$root <div...注意事项——针对同一链接，在当前页面保存用户名等信息，在新的tab页打开就失效了。localStorage不会。 localStorage：不主动清除，不会失效。
$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 对象 名。
完整的指令内容可以参阅 AngularJS 参考手册。...AngularJS 模块让所有函数的作用域在该模块下，避免了该问题。 ---- 什么时候载入库? 在我们的实例中，所有 AngularJS 库都在 HTML 文档的头部载入。...在我们的多个 AngularJS 实例中，您将看到 AngularJS 库是在文档的 区域被加载。...在我们的实例中，AngularJS 在 元素中被加载，因为对 angular.module 的调用只能在库加载完成后才能进行。...另一个解决方案是在 元素中加载 AngularJS 库，但是必须放置在您的 AngularJS 脚本前面： AngularJS 实例 <!
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内置了常用的表单验证指令，比如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的ng-repeat遍历过程中，如果遍历的数组中包含相同的项，则会抛错。 如下例： <!...Repeater: item in ages, Duplicate key: number:25, Duplicate value: 25 解决方案：在对应的ng-repeat指令中增加
大漠老师的路由理解 ---- 首先新建一个基础的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 的首选样式表是 Twitter Bootstrap， Twitter Bootstrap 是目前最受欢迎的前端框架。...Bootstrap 你可以在你的 AngularJS 应用中加入 Twitter Bootstrap，你可以在你的 元素中添加如下代码: 以下是一个完整的 HTML 实例, 使用了 AngularJS 指令和...glyphicon-save"> Save Changes 指令解析 AngularJS...-- Bootstrap 类解析 元素 Bootstrap 类 定义 container 内容容器 table 表格 table-striped 带条纹背景的表格
大家好，又见面了，我是你们的朋友全栈君。 一、AngularJS是什么？...AngularJS，简称：ng 它是一款非常优秀的前端高级JS框架 由Misko Hevery等人创建 2009年被Google公司收购，用于其多款产品 有一个全职的开发团队继续开发和维护这个库 这个框架可以轻松构建...，是可以用js事件监视的 window.addEventListener('hashchange', function(e) { //hash属于路径的组成部分 //hostname...然后发送ajax异步请求，将服务端返回的数据渲染到浏览器页面上 三、AngularJS四个特性 MVC（我更倾向于MVVM） 模块化 自动化双向数据绑定 指令系统 四、AngularJS的发展趋势 当前热门前端框架...当前热门前端框架：vue、react 虽然AngularJS正在走向没落，但是我们要知道它背后所带来的价值。
大家好，又见面了，我是你们的朋友全栈君。...angularjs第一天 五大事件 1、绑定事件 ，ng-model； 2、绑定对应的控制器，ng-controller； 3、绑定对应的APP，ng-app； 4、单击事件，ng-click；...5、初始化事件,ng-init； 引入angularjs，使用angularjs语法 < script src=”…/plugins/angularjs/angular.min.js” type=“..., $http是angularjs内置的方法，前后端分离，可调用后台方法 app.controller(‘brandController’,function(scope, http){} 在控制器中编写一个方法...post请求，success方法代表的是调用成功之后执行的操作 分页 分页所需引用的方法
AngularJS 有自己的 HTML 事件指令。 ---- ng-click 指令 ng-click 指令定义了 AngularJS 点击事件。...AngularJS 实例 点我！...应用有一个默认属性: $scope.myVar = false; ng-hide 指令设置 元素及两个输入域是否可见， 根据 myVar 的值 (true 或 false) 来设置是否可见。...toggle() 函数用于切换 myVar 变量的值（true 和 false）。 ng-hide="true" 让元素 不可见。...---- 显示 HTML 元素 ng-show 指令可用于设置应用中的一部分是否可见 。 ng-show="false" 可以设置 HTML 元素 不可见。
大家好，又见面了，我是你们的朋友全栈君。 AngularJS简介 AngularJS是一个JavaScript矿建，他是一个JavaSscript编写的库。...HTML5允许扩展的（自制的）属性，以data-开头。 AngularJS属性以ng-开头，但是您可以使用data-ng-来让网页对HTML5有效。 什么是AngularJS?...AngularJS 表达式把数据绑定到 HTML，这与 ng-bind 指令有异曲同工之妙。 AngularJS 将在表达式书写的位置”输出”数据。...与 JavaScript 表达式不同，AngularJS 表达式支持过滤器。 创建自定义的指令 你可以使用 .directive 函数来添加自定义的指令。...filter 从数组项中选择一个子集。 lowercase 格式化字符串为小写。 orderBy 根据某个表达式排列数组。 uppercase 格式化字符串为大写。
AngularJS 通过被称为指令的新属性来扩展 HTML。 AngularJS 通过内置的指令来为应用添加功能。 AngularJS 允许你自定义指令。...AngularJS 指令 AngularJS 指令是扩展的 HTML 属性，带有前缀ng-。 ng-app指令初始化一个 AngularJS 应用程序。 ng-init指令初始化应用程序数据。...ng-model指令把元素值（比如输入域的值）绑定到应用程序。 完整的指令内容可以参阅 AngularJS 参考手册。...AngularJS 实例 在输入框中尝试输入： 姓名： 你输入的为： {{ firstName }} 尝试一下 » ng-app指令告诉 AngularJS， 元素是 AngularJS...AngularJS 中的数据绑定，同步了 AngularJS 表达式与 AngularJS 数据。 {{ firstName }}是通过ng-model="firstName"进行同步。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM
