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 = /表达式/附加参数 表 ...
随机推荐
- Tp5.0 PHPMailer邮件发送
今天突然想起来邮件发送,就看了一下PHPmailer,其实这个用起来很简单,都是封装好的 https://github.com/PHPMailer/PHPMailer,直接下载下来之后,把他放入TP5 ...
- ELK logstash 处理MySQL慢查询日志（初步）
写在前面:在做ELK logstash 处理MySQL慢查询日志的时候出现的问题: 1.测试数据库没有慢日志,所以没有日志信息,导致 IP:9200/_plugin/head/界面异常(忽然出现日志数 ...
- Scala基础 - 下划线使用指南
下划线这个符号几乎贯穿了任何一本Scala编程书籍,并且在不同的场景下具有不同的含义,绕晕了不少初学者.正因如此,下划线这个特殊符号无形中增加Scala的入门难度.本文希望帮助初学者踏平这个小山坡. ...
- 使用DFA算法对敏感词进行过滤
项目目录结构如下: 其中resources资源目录中: stopwd.txt :停顿词,匹配时间直接过滤. wd.txt:敏感词库. 1.WordFilter敏感词过滤类: package com.s ...
- SharePoint 无法删除搜索服务应用程序
在SharePoint的使用中,经常会遇到某些服务创建失败,某些服务删除不成功的情况.这里,我们就遇到了搜索服务创建失败,然后删除也不成功,使用管理中心的UI无法删除,PowerShell命令也无法删 ...
- MySQL高可用方案MHA自动Failover与手动Failover的实践及原理
集群信息 角色 IP地址 ServerID 类型 Master ...
- 利用formatter原理自动化参数化查询
前言:对于经常忙于服务端开发的小伙伴来说,与DB层打交道是在正常不过的事了,但是每次页面的查询条件新增往往意味着后端代码参数化同比增长,当然你可以不使用sqlhelper自带的参数化条件查询,可以直接 ...
- TOJ4101.Guess Game(TOJ means Tianjin University Online Judge)（dp的思想，但这道题目是假dp）
题意:你要从[1,n]这个n个数中猜出来规定的某个数,现在这个数未知,问你在最糟糕的情况下(但是你采用了最优的策略),你要猜多少次才能猜出这个数.现在有两种条件: 第一种:当你猜的数比指定的那个数小的 ...
- 关于图的顶点染色问题的各种算法的C++实现之初探（一）——引言与简介
我是一个数学工作者,专业方向是图论.研究图论已经十年有余.一个月前,一个偶然的机会让我萌生了一个念头,那就是我想尝试用C++写出我所学过的图论方面的算法.作为一个数学工作者,过去一直是纸上谈兵,我之前 ...
- Oracle listener服务启动后又停止的解决方案
这是Oracle监听服务.忘了说我的版本是Oracle10g. 我装完Oracle数据库之后,然后用第三方工具plsql去连接,提示no listener,首先我反复检查tnsnames.ora配置文 ...