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 = /表达式/附加参数 表 ...
随机推荐
- R语言分析(二)——薛毅R语言第二章后面习题解析
包括2.2—2.6中间的习题,2.2的习题中第三问和第四问,应该有其他的解答方法,但我看他的题目,似乎是在A和B的基础上进行,所以就选择了使用for循环的方法 做着习题,又不断查着书,这样,书籍也熟悉 ...
- 玩一玩nodejs--一个简单的在线实时填表应用
学习nodejs三天,入了个门,感觉他和jsp.php还是存在较大的差别.本文首先复习这些天学的一些知识点,然后谈一下如何一步一步到做一个在线实时填表的小应用,进一步巩固一下这些个知识点.这里先简单介 ...
- Linux文件属性及如何修改文件属性
ls -al:显示文件的文件名与相关属性并列出所有文件详细的权限与属性 dr-xr-x---. 7 root root 4096 Apr3 12:31 ...
- 在centos7下安装python3
环境搭建 准备工具: centos7:http://mirror.bit.edu.cn/centos/7/isos/x86_64/CentOS-7-x86_64-DVD-1611.iso virtus ...
- 搭建本地 Registry - 每天5分钟玩转 Docker 容器技术（20）
Docker Hub 虽然非常方便,但还是有些限制,比如: 需要 internet 连接,而且下载和上传速度慢. 上传到 Docker Hub 的镜像任何人都能够访问,虽然可以用私有 reposito ...
- LinkedList源码解读
一.内部类Node数据结构 在讲解LinkedList源码之前,首先我们需要了解一个内部类.内部类Node来表示集合中的节点,元素的值赋值给item属性,节点的next属性指向下一个节点,节点的pre ...
- js实现选项卡切换的效果
效果图: css 代码: <style type="text/css"> *{margin: 0;padding: 0;list-style: none;} .demo ...
- bug 修复:上传库存时前端回发file_name参数丢失;
# tmp_file = os.path.join(os.path.abspath('youcart/tmp'), json.loads(request.data).get('file_name')) ...
- MYSQL和JAVA（课堂笔记）
MYSQL 数据库管理工具 JAVA 编程语言 数据库驱动(JAVA和MYSQL对接方式) 到官网上下载驱动 加载驱动 import java.sql.Connection;import java. ...
- canvas——随机生成迷宫
先上图. 效果 代码 随机生成迷宫要求任意两点都能够找到相同的路径,也就是说,迷宫是一个连通图.随机生成迷宫可以使用普里姆算法.广度优先算法.深度优先算法等实现.这里将使用普里姆算法通过生成最小数的方 ...