您的位置：首页 > Web前端 > AngularJS

AngularJS 使用元素与事件指令

2016-06-05 21:11 676 查看

学习要点：

使用元素指令

显示、隐藏和移除元素

管理类和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', complete : false },
{ 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 },
{ action : 'runnging', complete : false },
{ action : 'eating', complete : true },
{ action : 'shopping', 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", [])
// define a controller named defaultCtrl
.controller('defaultCtrl', function ($scope) {
// $scope.message = "Tap Me";
// $scope.dataValue = false;
$scope.todos = [
{ action : 'play ball', complete : false },
{ action : 'runnging', complete : false },
{ action : 'eating', complete : true },
{ action : 'shopping', complete : false }
];
$scope.buttonNames = ["Red", "Green", "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", [])
// define a controller named defaultCtrl
.controller('defaultCtrl', 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", [])
// define a controller named defaultCtrl
.controller('defaultCtrl', 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 元素指令处理事件特殊属性样式元素

相关文章推荐

新的分享

章节导航