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 = /表达式/附加参数 表 ...
随机推荐
- PHP实现类似于MySQ L的group by 效果
简单版本:只用于获取组数据 其实就是将键值变成键,遍历的时候键相同的会覆盖 $res[$v['country']] [] 可以 = 1,无关紧要
- hdu 2114 Calculate S(n) 数论(简单题)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2114 自己对数论一窍不通啊现在,做了一道水题,贴出来吧...主要是让自己记住这个公式: 前n项和的立方 ...
- Arduino UNO +ESP8266采集数据上传到贝壳网
集成电路设计大赛赛程将至,我现在还是毫无头绪,然后又报了一个互联网+,比赛报了,东西就必须出来,时间很紧的情况下,所以选择了开源的arduino的进行完成.从开始接触Arduino到完成工程,前前后后 ...
- 刑天DDOS攻击器下一版本即将使用NTP放大功能
刑天DDOS攻击器下一版本即将使用NTP放大功能 在一次无语实验中无意发现NTP方法后的攻击流量相当可观,Linux实测G口高达30G,也就是说最大可以放大30倍的攻击流量是何等的威武.而 ...
- SQL Server on Red Hat Enterprise Linux——RHEL上的SQL Server（全截图）
本文从零开始一步一步介绍如何在Red Hat Enterprise Linux上搭建SQL Server 2017,包括安装系统.安装SQL等相关步骤和方法(仅供测试学习之用,基础篇). 一． 创 ...
- 在 iOS 10.0 之后, App 要调用手机相机与相簿应注意的事项
iOS 的 SDK 每一年至少都会有一次大改版,从 2009 到 2016 年,版号已经到了第 10 版了,很轻易的就追上了 Mac OSX. 每一次的大改版都会有不少新的功能或新的规范,在 iOS ...
- 开涛spring3(4.2) - 资源 之 4.2 内置Resource实现
4.2 内置Resource实现 4.2.1 ByteArrayResource ByteArrayResource代表byte[]数组资源,对于“getInputStream”操作将返回一个By ...
- 彻底清除Linux centos minerd木马
前几天,公司两台linux服务器,一台访问速度很慢,cpu跑满,一台免密码登录失效,公钥文件被改写成redis的key.用htop命令查询发现了minerd木马进程,初步猜测是redis没有配访问权限 ...
- Nagios配置安装详解
nagios.html :first-child{margin-top:0!important}img.plugin{box-shadow:0 1px 3px rgba(0,0,0,.1);borde ...
- 【Windows 10 应用开发】如何防止应用程序被截屏
今天老周只想跟大伙们分享一个小技巧,是的,小小的技巧,很简单,保证你能学会的,要是学不会,可以考虑跳泰山. 有些时候,我们可能会想到不要让应用程序界面上显示的内容被截屏,要阻止应用界面呈现在截图上,可 ...