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 = /表达式/附加参数 表 ...
随机推荐
- js，jQuery和DOM操作的总结（二）
jQuery的基本操作 (1)遍历键值对和数组 , , , , , ]; $.map(arr, function (ele, index) { alert(ele + '===' + index); ...
- MapControl Application 添加自定义的工具条
现在想用二次开发做一些东西,然后需要自定义的工具条,但是如何向MapControl Application 添加自定义的工具条呢,经过多次试验后,终于找到了相应的方法(左图是添加自定义的工具条之前,右 ...
- A*算法的理解与简单实现
基本定义 一种寻路算法,特点是:启发式的,效率高,基本思路比较简单. 用途 寻路.在指定的地图上,考虑到地图上的移动代价,找到最优的路径. 核心概念 开表,闭表,估值函数. 开表 开表,记录了当前需要 ...
- ssm框架整合+maven项目创建
在引入外部maven插件后就可以创建一个maven项目了,这篇文章主要介绍ssm框架的整合和如何创建一个maven项目 1.在开发工具的项目空白区单击右键,依次选择New.Other,会出现如下界面, ...
- Spring——Web应用中的IoC容器创建(WebApplicationContext根应用上下文的创建过程)
基于Spring-4.3.7.RELEASE Spring的配置不仅仅局限在XML文件,同样也可以使用Java代码来配置.在这里我使用XML配置文件的方式来粗略地讲讲WebApplicationCon ...
- 【JAVAWEB学习笔记】23_Listener和邮箱服务器
监听器Listener 学习目标 案例-使用监听器完成定时生日祝福 一.监听器Listener javaEE包括13门规范 在课程中主要学习 servlet技术 和 jsp技术 其中 servlet规 ...
- windows下命令行cmder工具
windows下系统自带的命令行工具,实在是太丑了,输入命令后,有时排版乱七八糟,而且使用惯liunx系统的命令后,实在是不能够接受,这么蹩脚的工具:为此我给大家推荐一款实用的开源工具cmder 下载 ...
- 开涛spring3(2.1) - IoC基础
2.1.1 IoC是什么 Ioc—Inversion of Control,即“控制反转”,不是什么技术,而是一种设计思想.在Java开发中,Ioc意味着将你设计好的对象交给容器控制,而不是传统的在 ...
- ElasticSearch的Marvel更新license
Marvel安装的时候需要申请一个license,否则只有30天的使用时间,到期后最多保存7天的监控数据,为了造成不必要的监控数据丢失,建议安装的同时注册一个lincense,方法如下: 1. ...
- JqueryEasyUI-从入门到精通-第一天
PS:本教程暂时不提供源码,自己动手写写会记得更牢固哦 Parser(解析器) 对象的属性和方法: 使用: 效果: