angular.js小知识总结
angular-watch.html 代码如下:
<script>
var app = angular.module('app',[]);
app.controller('ctrl',function($scope){
$scope.init = {
price : ,//单价
count : , //数量
money : //运费
};
$scope.a = ;
$scope.$watch('init.count',function(newVal,oldVal){
console.log(newVal + ':' + oldVal);
$scope.a = newVal > ? : $scope.init.count * $scope.init.money;
},true);//第三个参数
$scope.sum = function(){
return $scope.init.price * $scope.init.count;
}
});
</script>
单价 : <input type="text" ng-model="init.price"/><br /><br />
数量 : <input type="number" ng-model="init.count"/><br /><br />
总价 : {{sum()}}<br /><br />
运费 : {{a}}
angular-filter 代码如下:
<script>
var app = angular.module('app',[]);
app.run(['$routeScope,$filter',function($routeScope,$filter){
$routeScope.a = ;
$routeScope.name = $filter('number')();
}])
</script>
angula-drag 代码如下:
<!DOCTYPE html>
<html ng-app="app"> <head>
<meta charset="UTF-8">
<title></title>
<style>
#box {
width: 100px;
height: 100px;
background: salmon;
position: absolute;
top: ;
left: ;
}
</style>
</head> <body>
<script src="js/jquery.3.1.1.js"></script>
<script src="js/angular.min.js"></script>
<script>
var app = angular.module('app', []);
app.directive('myDrag', function() {
return {
link: function(scope, element, attr) {
element.on('mousedown', function(ev) {
var This = $(this);
var disX = ev.clientX - $(this).offset().left;
var disY = ev.clientY - $(this).offset().top;
});
$(document).on('mousemove', function() {
This.css({
left: ev.clientX - disX,
top: ev.clientY - disY
})
})
$(document).on('mouseup',function(){
$(document).off();
})
},
restrict: 'A'
}
})
</script>
<div id="box" my-drag></div>
</body> </html>
angular-disabled 代码如下:
<script>
var app = angular.module('app',[]);
var timer;
app.controller('ctrl',function($scope,$interval){
$scope.iNum = ;
$scope.isDisabled = true; timer = $interval(function(){
$scope.iNum--;
if ($scope.iNum == ) {
$interval.cancel(timer);
//取消定时器
$scope.isDisabled = false;
}
},);
});
</script>
<div ng-controller="ctrl">
<input type="button" ng-disabled="isDisabled" value="{{iNum}}"/>
</div>
angular-directive 代码如下:
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8" />
<title></title>
<style>
p{
width: 300px;
height: 300px;
border: 1px solid saddlebrown;
display: none;
}
.on{
background: red;
}
</style>
<script src="js/angular.min.js"></script>
<script src="js/jquery-1.9.1.js"></script>
<script>
var app = angular.module('app',[]);
app.controller('ctrl',function($scope){
$scope.data = [
{title:'新闻',"con":'新闻'},
{title:'娱乐',"con":'娱乐'},
{title:'体育',"con":'体育'}
];
$scope.data2 = [
{title:'八卦',"con":'八卦'},
{title:'军事',"con":'军事'},
{title:'农业',"con":'农业'}
];
});
app.directive('myTab',function(){
return{
link:function(scope,element,attr){
element.delegate('input','click',function(){
$(this).attr('class','on').siblings('input').attr('class','');
$(this).siblings('p').eq($(this).index()).show().siblings('p').hide();
});
},
//element.delegate : 事件委托
restrict:'ECMA',
replace:true,
//scope:true,
scope:{
myId : '@', //随便起个名字
//@ : 针对字符串
//= : 针对数据和变量
myData:'='
},//隔离控制器0
templateUrl:'tpl.html'
}
})
</script>
</head>
<body ng-controller="ctrl">
<div>
<my-tab my-id="div1" my-data="data"></my-tab>
<my-tab my-id="div2" my-data="data2">{{name}}</my-tab>
</div>
</body>
</html>
angular-anchorScroll 代码如下:
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="UTF-8">
<title></title>
<style>
#box div{
width: 200px;
height: 300px;
border: 1px solid red;
margin-bottom: 20px;
}
#box ul{
position: fixed;
top: 20px;
right: 20px;
}
#box ul li{
width: 150px;
height: 30px;
border: 1px solid red;
text-align: center;
list-style: none;
margin-top: -1px;
}
</style>
<script src="js/angular.min.js"></script>
<script>
var app = angular.module('app',[]);
app.controller('ctrl',function($scope,$location,$anchorScroll){
$scope.arr = [,,,,,];
$scope.show = function(id){
$location.hash(id);
//hash()设置地址栏里的信息,可以设置也可以获取
$anchorScroll();
//清空上次执行的
//在执行一次
}
})
</script>
</head>
<body ng-controller="ctrl">
<div id="box">
<ul>
<li ng-repeat="id in arr" ng-click="show('div' + id)">div{{id}}</li>
</ul>
<div ng-repeat="id in arr" id="div{{id}}">div{{id}}</div>
</div>
</body>
</html>
angular-bootstrap 代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
p{
width: 200px;
height: 200px;
border: 1px solid salmon;
text-align: center;
line-height: 200px;
}
</style>
</head>
<body>
<script src="js/angular.min.js"></script>
<script>
var app = angular.module('app1',[]);
var app = angular.module('app2',[]);
app.controller('ctrl1',function($scope){
$scope.a = ;
});
app.controller('ctrl2',function($scope){
$scope.b = ;
});
var oDiv = document.getElementsByTagName('div');
angular.element(document).on('click',function(){
angular.bootstrap(oDiv[],['app1']);
angular.bootstrap(oDiv[],['app2']);
//参数 模块定义给谁,模块名
//手动开启angular应用模式
})
</script>
<div ng-controller="ctrl1">{{a}}</div>
<div ng-controller="ctrl2">{{b}}</div>
</body>
</html>
cachFactory 代码如下:
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/angular.min.js"></script>
<script>
var app = angular.module('app',[]);
app.controller('ctrl',function($scope,$cacheFactory){
var cache = $cacheFactory('myCache',{capacity:});
//capacity:2 限制size的个数
//默认删除第一条
cache.put('name','lily');
cache.put('age','');
cache.put('sex','women');
//cache.remove('name');
//info() 当前这条详细信息
console.log(cache.get('name'));
//console.log(cache.info());
})
</script>
</head>
<body ng-controller="ctrl">
</body>
</html>
$loaction
<!DOCTYPE html>
<html ng-app="mk">
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/angular.min.js"></script>
<script>
var app = angular.module('mk',[]);
app.controller('ctrl1',function($scope,$location){
$scope.url = 'http://www.baidu.com#/path/abd?news=123456&user=name&pass=123';
var a = $location.hash('hi');
var b = $location.search('name=rose');
console.log($location.url());//相对路径 : /path/abd?news=123456&user=name&pass=123
console.log($location.absUrl());//绝对路径 : http://127.0.0.1:8020/%E5%A4%8D%E4%B9%A0/$location.html#/path/abd?news=123456&user=name&pass=123
console.log($location.host());//主机名 : 127.0.0.1
console.log($location.port());//端口号 : 8020
console.log($location.search());//数据 : Object {news: "123456", user: "name", pass: "123"}
console.log($location.path());//盘符 : /path/abd
console.log($location.protocol());//协议 : http
})
</script>
</head>
<body ng-controller="ctrl1">
</body>
</html>
angular.js小知识总结的更多相关文章
- 第24篇 js小知识和“坑”
前面说了说了js的相关知识,基本上除了语法外,把项目常用的知识做了一个梳理,现在说下js的其它方面的知识,这些知识不成体系,属于不理解对于一般开发没什么太多影响,但如果理解清楚,可以更好去开发. js ...
- 零散的JS和node.js小知识
JS的连续赋值和曾经出现的怪异情况 let a=1; let b=a=3; 如上的真实赋值过程 => a=1 => a=3 => b=3 => 一般来说,等号是从右向左赋值的 ...
- javascript实用技巧，js小知识
一.js整数的操作 使用|0和~~可以将浮点转成整型且效率方面要比同类的parseInt,Math.round 要快,在处理像素及动画位移等效果的时候会很有用.性能比较见此. var foo = (1 ...
- js 小知识
在iframe 页面获取父级页面的 html var obj = window.parent.document.getElementById('modaliframe'); 解决Jquery 的在一个 ...
- 看到的一些js小知识
向数组结尾添加元素高效方法: var arr = [1,2,3]; arr[arr.length] = 4 头部: var a = [1,2,3]; a.concat(4,5); // 1,2,3,4 ...
- js小知识-数组去重
查看zepto源码时,看到它的数组去重写法非常简单.下面是代码 var uq = function(array){ return [].filter.call(array,function(item, ...
- 常用JS小知识汇总
1 上传图片:html代码 <input id="image" type='file' name='myFile' size='15' onchange="show ...
- js小知识
1.重新声明js变量,变量值不丢失 2.background-color 使用jquery获取样式中的background-color的值时发现在获取到的颜色值在IE中与Chrome.Firefox显 ...
- js小知识 正则表达
js定义正则表达式有两种方式:普通方式,构造函数方式 正则对象是js的内置对象 正则的属性 正则的方法 js中字符串的方法 一.普通方式(双斜杠//方式):var reg = /表达式/附加参数 表 ...
随机推荐
- 在QT中创建文件
最近在做QT东西时遇到在指定路径下创建文件,发现qt中没有直接用的. 主要通过自定义一个createFile()函数来实现,其中需要用到<QFile> <QDir> <Q ...
- hdu698 Just a Hook 线段树-成段更新
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1698 很简单的一个线段树的题目,每次更新采用lazy思想,这里我采用了增加一个变量z,z不等于0时其绝 ...
- MyEclipse修改项目名称后，部署到tomcat问题。
1.问题描述: 修改项目名称后,部署到tomcat server,部署出来的文件夹名还是旧的名称. 2.解决方案: 光把项目重命名是不够的,还要修改一下Myeclipse里面的配置. a). 工程名- ...
- Source Insignt注册码
分享一下google来的 呵呵 Source Insight,一个无比强大的工具.一个很好的查看代码的工具.到它的官网上去看一下,就知道,世界上基本上所有的大的软件公司,都在用这个工具.习惯了这个工具 ...
- 接口测试-jmeter
一.jmeter下载安装 1)安装jdk(见博文<windows上安装jdk>) 2)在jmeter官网下载 http://jmeter.apache.org/download_jmet ...
- Promise简介
Promise是ES6中的函数,规范了如何处理异步任务的回调函数,功能类似于jQuery的defferred.简单说就是通过promise对象的不同状态调用不同的回调函数.目前IE8及以下不支持,其他 ...
- 开涛spring3(9.4) - Spring的事务 之 9.4 声明式事务
9.4 声明式事务 9.4.1 声明式事务概述 从上节编程式实现事务管理可以深刻体会到编程式事务的痛苦,即使通过代理配置方式也是不小的工作量. 本节将介绍声明式事务支持,使用该方式后最大的获益是简 ...
- [转载]OpenStack OVS GRE/VXLAN网络
学习或者使用OpenStack普遍有这样的现象:50%的时间花费在了网络部分:30%的时间花费在了存储方面:20%的时间花费在了计算方面.OpenStack网络是不得不逾越的鸿沟,接下来我们一起尝 ...
- Exploit-Exercises nebule 旅行日志（一）
exploit-exercises.com provides a variety of virtual machines, documentation and challenges that can ...
- collections模块方法详解
collections是Python内建的一个集合模块,提供了许多有用的集合类. namedtuple 我们知道tuple可以表示不变集合,例如,一个点的二维坐标就可以表示成: >>> ...