学习要点：
- 使用元素指令
- 显示、隐藏和移除元素
- 管理类和CSS
- 处理事件
- 管理特殊属性
背景代码
<!DOCTYPE> <!-- use module --> <html ng-app="exampleApp"> <head> <title>Angular Directive</title> <Meta charset="utf-8"/> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css"> </head> <body> <div id="todoPanel" class="panel" ng-controller="defaultCtrl"> <h3 class="panel-header">To Do List</h3> <table class="table table-striped table-bordered table-hover"> <tr><th>#</th><th>Aciton</th><th>Done</th><th>Status</th></tr> <tr ng-repeat="item in todos"> <td>{{$index + 1}}</td> <td ng-repeat="prop in item">{{prop}}</td> </tr> </table> </div> <script type="text/javascript" src="js/angular.min.js"></script> <script type="text/javascript"> // define a module named exampleApp angular.module("exampleApp",[]) // define a controller named defaultCtrl .controller('defaultCtrl',function ($scope) { $scope.todos = [ { action : 'play ball',complete : false },{ action : 'runnging',{ action : 'eating',complete : true },{ action : 'shopping',complete : false } ]; }) </script> </body> </html>
一、使用元素指令
1.显示、隐藏和移除元素
<div class="checkBox well"> <label> <input type="checkBox" ng-model="todos[2].complete" />Item 3 is complete </label> </div> <table class="table table-striped table-bordered table-hover"> <tr><th>#</th><th>Aciton</th><th>Done</th><th>Status</th></tr> <tr ng-repeat="item in todos"> <td>{{$index + 1}}</td> <td ng-repeat="prop in item">{{prop}}</td> <td> <!-- <span ng-hide="item.complete"> (Imcomplete)</span> <span ng-show="item.complete"> (complete)</span> --> <span ng-if="!item.complete"> (Imcomplete)</span> <span ng-if="item.complete"> (complete)</span> </td> </tr> </table>
解决表单的条纹化问题以及ng-repeat的冲突—过滤器
<div class="checkBox well"> <label> <input type="checkBox" ng-model="todos[2].complete" />Item 3 is complete </label> </div> <table class="table table-striped table-bordered table-hover"> <tr><th>#</th><th>Aciton</th><th>Done</th></tr> <tr ng-repeat="item in todos | filter : { complete :'false' }"> <td>{{$index + 1}}</td> <td ng-repeat="prop in item">{{prop}}</td> </tr> </table>
2.管理类和CSS
单击行列的颜色按钮，更换表格的行列颜色
// define a module named exampleApp
angular.module("exampleApp",[])
// define a controller named defaultCtrl
.controller('defaultCtrl',function ($scope) {
// $scope.message = "Tap Me";
// $scope.dataValue = false;
$scope.todos = [
{ action : 'play ball',complete : false },complete : true },complete : false }
];
// 在controller中添加内容
$scope.buttonNames = ["Red","Green","Blue"];
$scope.settings = {
Rows : "Red",Columns : "Green"
};
})
<style> .Red { background-color: lightcoral; } .Green { background-color: lightgreen; } .Blue { background-color: lightblue; } </style>
<div class="row well"> <div class="col-xs-6" ng-repeat="(key,val) in settings"> <h4>{{key}}</h4> <div class="radio" ng-repeat="button in buttonNames"> <label> <input type="radio" ng-model="settings[key]" value="{{button}}">{{button}} </label> </div> </div> </div> <table class="table table-striped table-bordered table-hover"> <tr><th>#</th><th>Aciton</th><th>Done</th></tr> <tr ng-repeat="item in todos" ng-class="settings.Rows"> <td>{{$index + 1}}</td> <td>{{item.action}}</td> <td ng-style="{'background-color' : settings.Columns }"> {{item.complete}} </td> </tr> </table>
设置奇数行和偶数行的CSS样式
<table class="table table-striped table-bordered"> <tr><th>#</th><th>Aciton</th><th>Done</th></tr> <tr ng-repeat="item in todos" ng-class-even="settings.Rows" ng-class-odd="settings.Columns"> <td>{{$index + 1}}</td> <td>{{item.action}}</td> <td>{{item.complete}}</td> </tr> </table>
二、事件处理
1.单击不同的按钮切换表格颜色
样式部分
<style> .Red { background-color: lightcoral; } .Green { background-color: lightgreen; } .Blue { background-color: lightblue; } </style>
JS部分
// define a module named exampleApp
angular.module("exampleApp",complete : false }
];
$scope.buttonNames = ["Red","Blue"];
$scope.data = {
rowColor : "Blue",columnColor : "Green"
};
$scope.handleEvent = function (e) {
console.log("Event type: " + e.type);
$scope.data.columnColor = e.type == "mouSEOver" ? "Green" : "Blue";
}
})
视图部分
<div class="well"> <span ng-repeat="button in buttonNames"> <button class="btn btn-info" ng-click="data.rowColor = button">{{button}}</button> </span> </div> <table class="table table-striped table-bordered"> <tr><th>#</th><th>Aciton</th><th>Done</th></tr> <tr ng-repeat="item in todos" ng-class="data.rowColor" ng-mouseenter="handleEvent($event)" ng-mouseleave="handleEvent($event)"> <td>{{$index + 1}}</td> <td>{{item.action}}</td> <td ng-class="data.columnColor">{{item.complete}}</td> </tr> </table>
2.自定义指令
脚本
// define a module named exampleApp
angular.module("exampleApp",function ($scope) {
$scope.message = "Tap Me";
})
.directive("tap",function () {
return function (scope,elem,attrs) {
elem.on("click",function () {
scope.$apply(attrs["tap"]);
})
}
})
视图部分
<div class="well" tap="message = 'Tapped!'"> {{message}} </div>
三、管理特殊属性
1.布尔属性
// define a module named exampleApp
angular.module("exampleApp",function ($scope) {
$scope.dataValue = false;
});
视图
<div class="well checkBox">
<label>
<input type="checkBox" ng-model="dataValue">禁用按钮
</label>
</div>
<button class="btn btn-success" ng-disabled="dataValue">按钮</button>