angularJs
泠泠在路上
90后爱好阅读的小城程序员女孩,专注于个人成长、技术分享,去更远的地方,见更亮的光!
展开
-
angularjs项目的知识点
AngularJS通过$location获取及改变当前页面的URLhttp://blog.csdn.net/u010977147/article/details/59626999原创 2017-11-20 13:36:18 · 309 阅读 · 0 评论 -
angularJs自定义过滤器实现手机号信息隐藏
<div ng-app="module" ng-controller="ctrl"> <table border="1" width="600"> <tr> <td>编号</td> <td>姓名</td> <td>手机号</td> </tr> <tr ng-repeat="原创 2017-06-01 09:01:30 · 1903 阅读 · 0 评论 -
angularJs中自定义指令transclude与templateUrl详解
默认情况下,自定义指令里模板的部分会替换掉指令所使用的所有内容,那么,如果想保留这些内容,就要使用transclude属性。1.html <div ng-app="module"> <div my-exam>你好</div> </div> <script> var m = angular.module('module', []); m.原创 2017-06-05 11:37:35 · 1657 阅读 · 0 评论 -
angularJs使用$watch和$filter过滤器制作搜索筛选实例
<div ng-app="module" ng-controller="ctrl"> 搜索: <input type="text" ng-model="search"> <table border="1" width="600"> <tr> <td>编号</td> <td>点击数</td> <td原创 2017-05-31 17:48:42 · 2219 阅读 · 0 评论 -
angularJs利用$scope处理升降序
<div ng-app="module" ng-controller="ctrl"> <table border="1" width="600"> <tr> <td ng-click="orderBy('id')">编号 <span ng-if="status.id">升序</span>原创 2017-05-31 17:01:46 · 1044 阅读 · 0 评论 -
angularJs在控制器中使用过滤器实例
<div ng-app="module" ng-controller="ctrl"> {{data}} <button ng-click="orderBy()">在控制器中使用过滤器</button></div><script> var m = angular.module('module', []); /*在控制器中注入$filter的服务*/ m.co原创 2017-05-31 16:48:17 · 2730 阅读 · 7 评论 -
angularJs中orderBy筛选以及filter过滤数据
<div ng-app="module" ng-controller="ctrl"> <!--按照click降序排序--> {{data|orderBy:'click':true}}<br> <!--按照id升序排序--> {{data|orderBy:'id':false}}<br> <!--筛选匹配3的数据--> {{data|filter:'3'}}原创 2017-05-31 16:39:27 · 3366 阅读 · 0 评论 -
angularJs过滤器(货币转换,大小写,字数限制,日期)
<div ng-app="module" ng-controller="ctrl" style="text-align: center"> <!--原值--> {{price}} <br> <!--使用currency过滤器--> {{price|currency}} <br> <!--使用currency过滤器用固定的前缀--> {{price|cu原创 2017-05-31 15:41:37 · 4569 阅读 · 0 评论 -
angularJs中自定义指令replace属性详解
<div ng-app="module"> <div my-exam></div> </div> <script> var m = angular.module('module', []); m.directive('myExam', [function () { return {原创 2017-06-05 11:01:12 · 1678 阅读 · 0 评论 -
angularJs中指令介绍与用法
指令定义规范: 1.前缀最好不要有ng-,这是angularJs自带的指令前缀 2.带前缀的可以使用驼峰命名规则,例子见2.html1.html<div ng-app="module"> <div welcome></div><!--A属性--> <hr> <h1 welcome></h1><!--A属性--> <hr> <welcome></welcom原创 2017-06-05 10:52:36 · 458 阅读 · 0 评论 -
angularJs中controller控制器scope父子集作用域实例
1.ctrl1是父级控制器,ctrl2和ctrl3都是ctrl1的子级控制器, 2.父级ctrl1中name值的改变会影响ctrl2和ctrl3中name值的改变, 3.但是ctrl2有自己的name输入传的值,不会影响ctrl1和ctrl3,这就是继承隔离, 4.ctrl3无name赋值就继承父级ctrl1中的name的值。一、继承隔离的情况<div ng-app="module">原创 2017-06-05 14:52:21 · 2773 阅读 · 0 评论 -
AngularJS 指令的 Scope 作用域的详解
在理解scope作用域过程中,网上查找资料,找到一篇写的很详细,容易理解的文字,下面是链接,分享一下~一招制敌 - 玩转 AngularJS 指令的 Scope (作用域)转载 2017-06-09 11:26:22 · 261 阅读 · 0 评论 -
angularJs中ng-init,ng-trim及表单value与$scope数据提交差异分析
1.ng-init:数据初始化,例:ng-init="name='百度'",初始化name值为“百度”,不过大部分还是使用$scope2.ng-trim:只影响ng中$scope,去除输入时的空格,一般和ng-module在一起,ng-trim默认为true,有ng-module的时候可以省略不写3.在表单中输入数据的时候,先是改变表单value的值,value中不去除空格,需要将数据通过$scop原创 2017-05-28 11:07:43 · 4328 阅读 · 2 评论 -
uiRouter路由操作实例(二)
一、uiRouter路由参数设置与$stateParams服务的使用<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <script src="../org/angular.min.js"></script> <script src="../org/angular-ui-router.min.js">原创 2017-06-13 12:22:01 · 588 阅读 · 0 评论 -
angularJs路由操作实例(一)
一、初始化定义路由<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <script src="../org/angular.min.js"></script> <!--引入包--> <script src="../org/angular-ui-router.min.js"></script>原创 2017-06-12 19:00:33 · 910 阅读 · 0 评论 -
angularJs在多个控制器中共享服务数据
<div ng-app="module"> <div ng-controller="ctrl1"> <table border="1" width="600"> <tr> <td>网站名称</td> <td>网址</td> </tr> <tr原创 2020-09-25 09:33:16 · 394 阅读 · 0 评论 -
angularJs中2种自定义服务实例
本篇文章介绍2种自定义服务的方式,一种是用factory,一种是用service一、首先介绍使用factory来进行自定义服务1.html<div ng-app="module" ng-controller="ctrl"> <table border="1" width="600"> <tr> <td>网站名称</td> <td原创 2017-06-12 17:33:43 · 486 阅读 · 0 评论 -
angularJs中$http获取后台数据实例
1.html<div ng-app="module" ng-controller="ctrl"> <table border="1" width="600"> <tr> <td>网站名称</td> <td>网址</td> </tr> <tr ng-repeat="v in data">原创 2017-06-11 13:26:58 · 11569 阅读 · 2 评论 -
angularJs中$cacheFactory缓存用法
<div ng-app="module" > <div ng-controller="ctrl1"> {{data}} </div> <div ng-controller="ctrl2"> {{data}} </div></div><script> var m = angular.module('module', []);原创 2017-06-11 10:20:34 · 2294 阅读 · 0 评论 -
angularJs中$sce服务安全显示html文本
<div ng-app="module" ng-controller="ctrl"> {{data}} <hr> <div ng-bind-html="data"></div> <hr> <div ng-bind-html="title | trustHtml"></div></div><script> var m = angular.module原创 2017-06-11 09:43:56 · 794 阅读 · 0 评论 -
angularJs中指令的directive的controller属性
1.html<div ng-app="module"> <ex-ctrl></ex-ctrl></div><script> var m = angular.module('module', []); m.directive('exCtrl', [function () { return { restrict: 'E',原创 2017-06-09 11:51:05 · 1251 阅读 · 0 评论 -
angularJs弹性盒模型+bootstrap开发案例
angularJs结合微信的弹性盒模型+bootstrap开发前端并实现数据增加,删除功能。<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <script src="angular.min.js"></script> <script src="underscore-min.js"></script>原创 2017-05-31 15:04:52 · 731 阅读 · 0 评论 -
angularJs中事件处理
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <script src="angular.min.js"></script></head><body><div ng-app="module" ng-controller="ctrl"> <!--ng-click单击--> <div ng原创 2017-05-28 17:54:27 · 453 阅读 · 0 评论 -
angularJs中ng-style动态改变样式
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <script src="angular.min.js"></script></head><body><div ng-app="module" ng-controller="ctrl"> 颜色: <input type="text" ng-mod原创 2017-05-28 17:31:30 · 6399 阅读 · 0 评论 -
angularJs函数使用方法(大小写转换,拷贝,扩充对象)
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <script src="angular.min.js"></script></head><body><div ng-app="module" ng-controller="ctrl"></div><script> var m = angula原创 2017-05-27 15:58:04 · 2794 阅读 · 0 评论 -
angularJs操作select列表框
ng-options="v.value as v.name for v in data" //v.value相当于option的value值//v.name为option填充显示的值//v in data:data遍历,v为每个遍历值别名ng-model="city"//city值为选中的value的值<!doctype html><html lang="en"><head>原创 2017-05-27 15:22:57 · 669 阅读 · 0 评论 -
angularJs复选框checkbox选中进行ng-show显示隐藏
ng-true-value="1" //代表选中的时候,值为1ng-false-value="0" //代表未选中的时候,值为0<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <script src="angular.min.js"></script></head><body><div ng-app原创 2017-05-27 15:00:00 · 2276 阅读 · 0 评论 -
angularJs中的ng-show指令
单选框选定控制ng-show的显示和隐藏ng-show="status==0" //ng-show里可以写表达式,该表达式意思是:status值为0的时候,该区域显示。<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <script src="angular.min.js"></script></head>原创 2017-05-27 14:44:18 · 1304 阅读 · 0 评论 -
angularJs提交文本框数据到后台
ng-model="name" //填写的数据提交到index.phpindex.html<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <script src="angular.min.js"></script></head><body><div ng-app="module" ng-contro原创 2017-05-27 14:30:59 · 1228 阅读 · 0 评论 -
angularJs中ng-cloak指令
angularJs中ng-cloak指令,是为了防止用{{}}双花括号显示数据时会出现括号闪现的问题,ng-bind本身已经避免了这个问题,在引用{{}}之外写上ng-cloak即可。也可以像下面例子里一样,定义class为ng-cloak的display: none;之后再遇到ng-cloak后即显示。<!doctype html><html lang="en"><head> <met原创 2017-05-27 14:25:40 · 3501 阅读 · 0 评论 -
angularJs中的ng-click指令
1.引入angular.min.js2.创建module,controller并引入3.利用$scope作用域传入数据,并在页面显示4.$scope中定义add和reduce方法,页面中用ng-click调用方法,处理点击事件。<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <script src="ang原创 2017-05-27 14:15:37 · 3544 阅读 · 0 评论 -
angularJs单向/双向数据绑定
1.引入angular.min.js2.创建angularJs module :var m = angular.module('module', []);3.引入module:ng-app="module"4.在module下创建controller://ctrl:controller的名称,$scope为作用域m.controller('ctrl', ['$scope', function (原创 2017-05-27 14:06:07 · 2708 阅读 · 0 评论 -
推荐angularJs开发,调试,测试工具
首先是NodeJs代码编辑工具 sublime text 轻量级 webstorm 占的资源多一些断点调试工具chrome插件Batarang版本管理工具github tortoisegit代码合并和混淆工具grunt以及插件 grunt-contrib-uglify, 对代码进行混淆的 grunt-contrib-concat,合并文件 grunt-contrib-watch原创 2017-03-01 15:26:41 · 1544 阅读 · 0 评论 -
angularJs中2种方式进行数据遍历
2种方式分别为:1.数组数据遍历2.对象数据遍历<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <script src="angular.min.js"></script></head><body><div ng-app="module" ng-controller="ctrl">{{data}}原创 2017-05-27 16:45:38 · 799 阅读 · 0 评论 -
angularJs中json数据转换与本地存储
1.html:把json对象转换成json字符串<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <script src="angular.min.js"></script></head><body> <div ng-app="module" ng-controller="ctrl"> {{原创 2017-05-27 17:20:13 · 1931 阅读 · 0 评论 -
angularJs中的ng-class动态改变样式
exam1.html<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <script src="angular.min.js"></script></head><body><style> .lock { background : #dcdcdc; } .red {原创 2017-05-28 17:27:07 · 11077 阅读 · 0 评论 -
angularJs中ng-model-options设置数据同步
后台请求任务量很大的时候,可以设置同步的时间和操作, 利用ng-model-options来实现。<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <script src="angular.min.js"></script></head><body><div ng-app="module" ng-co原创 2017-05-28 17:09:22 · 885 阅读 · 0 评论 -
angularJs中表单的全选与反选
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <script src="angular.min.js"></script></head><body><div ng-app="module" ng-controller="ctrl"> <table border="1" width="500"原创 2017-05-28 16:03:44 · 310 阅读 · 0 评论 -
angularJs中ng-readonly和ng-disabled的区别
**ng-readonly:不能修改,但是可以提交数据 ng-disabled:不能修改,也不可以提交数据**<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <script src="angular.min.js"></script></head><body><style> input[re原创 2017-05-28 15:42:22 · 3581 阅读 · 0 评论 -
angularJs中ng-selected使用
通过单选按钮选择选中哪个option<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <script src="angular.min.js"></script></head><body><div ng-app="module" ng-controller="ctrl"> <input type="r原创 2017-05-28 15:20:41 · 1995 阅读 · 0 评论