1、過濾器
<!doctype html>
<!-- ng-app使用範圍HTML -->
<html lang="en" ng-app="test">
<head>
<meta <meta charset=" " set="UTF-8">
<title>Document</title>
<style type="text/css" media="screen">
#div1 input {background: #CCC;}
#div1 input.active {background: yellow;}
#div1 div {width: 200px;height: 200px;border: 1px solid #000;}
</style>
<script src="angular.min.js"></script>
<script type="text/javascript">
var app=angular.module('test', [])
app.controller('cont1', function($scope){
$scope.arr=[12.4,12,3,44]
$scope.timer=12341341234
})
app.filter('my_filter',function () {
//只執行一次，進行初始化
//alter()
return function (input) {
//執行多次
return input+19
}
})
</script>
<style type="text/css" media="screen">
</style>
</head>
<body ng-controller="cont1">
<ul>
<li ng-repeat="v in arr">{{v|my_filter}}:{{timer|date:'yyyy年MM月dd日'}}</li>
</ul>
</body>
</html>2、directive：增強HTML
可以使用 .directive 函數來添加自定義的指令。
要調用自定義指令，HTML 元素上需要添加自定義指令名。
使用駝峯法來命名一個指令， runoobDirective, 但在使用它時需要以 - 分割, runoob-directive:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="angular.min.js"></script>
<script type="text/javascript">
var app=angular.module('test', [])
app.directive("runoobDirective", function() {
return {
restrict : 'C',
template : "<h1>自定義指令!</h1>"
// replace : true
// M 必須加上replace:true，替換原有元素；replace:false，插入標籤
};
});
</script>
</head>
<body ng-app="test">
<runoob-directive>restrict:E</runoob-directive>
<div runoob-directive>restrict:A</div>
<span class="runoob-directive">restrict:C</span>
<!-- directive: runoob-directive -->
</body>
</html>restrict 值可以是以下幾種:
E作爲元素名使用A作爲屬性使用C作爲類名使用M作爲註釋使
restrict 默認值爲 EA, 即可以通過元素名和屬性名來調用指令。
3、directive>ng-transclude 嵌入 佔位符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="angular.min.js"></script>
<script type="text/javascript">
var app=angular.module('test', [])
app.directive("runoobDirective", function() {
return {
restrict : 'E',
template : "<h1><ng-transclude></ng-transclude> 自定義指令!</h1>",
transclude:true
// replace : true
// M 必須加上replace:true，替換原有元素；replace:false，插入標籤
};
});
</script>
</head>
<body ng-app="test">
<runoob-directive>restrict:E</runoob-directive>
<div runoob-directive>restrict:A</div>
<span class="runoob-directive">restrict:C</span>
<!-- directive: runoob-directive -->
</body>
</html>4、directive-下拉框組建
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="angular.min.js"></script>
<script type="text/javascript">
var app=angular.module('test', [])
app.controller('cont1', ['$scope', function ($scope) {
$scope.str=""
$scope.arr=['iphone','huawei','meizu','sansunm','lenovo']
}])
app.directive('drop', [function () {
return {
restrict: 'E',
template:
'<input type="text" ng-model="str">\
<ul>\
<li ng-repeat="a in arr" ng-show="a.indexOf(str)!=-1" >`a`</li>\
</ul>'
};
}])
</script>
</head>
<body ng-app='test' ng-controller='cont1'>
<drop></drop>
</body>
</html>5、angular模塊化技術
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="angular.min.js"></script>
<script type="text/javascript">
//angular.module() 創建模塊mod1
angular.module('mod1', []).controller('mod1Ctrl', ['$scope', function ($scope) {
$scope.a="mod1Ctrl"
}])
//angular.module() 創建模塊mod2
angular.module('mod2', []).controller('mod2Ctrl', ['$scope', function ($scope) {
$scope.b="mod2Ctrl"
}])
////angular.module() 創建模塊mod3,調用其他模塊mod1,mod2
angular.module('mod3', ['mod1','mod2'])
</script>
</head>
<!-- ng-app 使用模塊mod3 -->
<body ng-app='mod3' >
<div ng-controller="mod1Ctrl">`a`</div>
<div ng-controller="mod2Ctrl">`b`</div>
<div>`a`,`b`</div>
</body>
</html>