标签：show 控制 端口号 tle 隔离 city ddl 控制器 lte
angular-watch.html 代码如下:
<script>
var app = angular.module(‘app‘,[]);
app.controller(‘ctrl‘,function($scope){
$scope.init = {
price : 20,//单价
count : 5, //数量
money : 3 //运费
};
$scope.a = 0;
$scope.$watch(‘init.count‘,function(newVal,oldVal){
console.log(newVal + ‘:‘ + oldVal);
$scope.a = newVal > 10 ? 0: $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 = 12;
$routeScope.name = $filter(‘number‘)(123456789);
}])
</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: 0; left: 0; } </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 = 5;
$scope.isDisabled = true;
timer = $interval(function(){
$scope.iNum--;
if ($scope.iNum == 0) {
$interval.cancel(timer);
//取消定时器
$scope.isDisabled = false;
}
},1000);
});
</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 = [1,2,3,4,5,6]; $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 = 30;
});
app.controller(‘ctrl2‘,function($scope){
$scope.b = 20;
});
var oDiv = document.getElementsByTagName(‘div‘);
angular.element(document).on(‘click‘,function(){
angular.bootstrap(oDiv[0],[‘app1‘]);
angular.bootstrap(oDiv[1],[‘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:3}); //capacity:2 限制size的个数 //默认删除第一条 cache.put(‘name‘,‘lily‘); cache.put(‘age‘,‘20‘); 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>
标签：show 控制 端口号 tle 隔离 city ddl 控制器 lte
原文地址：http://www.cnblogs.com/Mousika/p/7087252.html
