AngularJS 使用元素与事件指令

学习要点：

使用元素指令
- 显示、隐藏和移除元素
- 管理类和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>

AngularJS 使用元素与事件指令

猜你在找的Angularjs相关文章