大佬教程收集整理的这篇文章主要介绍了AngularJS 使用元素与事件指令，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
学习要点：
背景代码
<!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>
// 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>
以上是大佬教程为你收集整理的AngularJS 使用元素与事件指令全部内容，希望文章能够帮你解决AngularJS 使用元素与事件指令所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。