AngularJS 使用元素与事件指令

来源：互联网发布：淘宝网首页百色针织编辑：程序博客网时间：2024/06/06 20:13

学习要点：

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

0 0