[轉]AngularJS 實現 Table的一些操做(示例大於實際)

時間 2020-07-12
標籤 angularjs 實現 table 一些示例大於實際欄目 AngularJS 简体版
原文原文鏈接
本文轉自：http://www.cnblogs.com/lin-js/p/linJS.htmljavascript
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script type="text/javascript" src="lib/angular.js"></script>
    <style type="text/css">
    table {
        border: 1px solid #ccc;
        border-collapse: collapse;
    }
    td,
    th {
        height: 40px;
        width: 90px;
        border: 1px solid #ccc;
        text-align: center;
    }
    input {
        height: 100%;
        width: 100%;
        border: none;
    }
    .readonly {
        background: green;
    }
    .active {
        background: #ddd;
    }
    td.options {
        width: 400px;
        text-align: left;
    }
    td.options>input {
        width: 100px;
    }
    </style>
</head>

<body ng-app="mapp">

    <table ng-controller="mtable">
        <tr>
            <th>姓名</th>
            <th>年齡</th>
            <th>學號</th>
            <th>興趣</th>
            <th>Options</th>
        </tr>

        <tr ng-repeat="item in items" ng-controller="row">
            <td>
                <input type="text" ng-model="item.name" ng-readonly="varlist.isreadonly" value={ {item.name}} ng-class="{true:'inactive',false:'active'}[varlist.isreadonly]" placeholder="name">
            </td>
            <td>
                <input type="text" ng-model="item.age" ng-readonly="varlist.isreadonly" value={ {item.age}} ng-class="{true:'inactive',false:'active'}[varlist.isreadonly]" placeholder="age">
            </td>
            <td>
                <input type="text" ng-model="item.id" ng-readonly="varlist.isreadonly" value={ {item.id}} ng-class="{true:'inactive',false:'active'}[varlist.isreadonly]" placeholder="id">
            </td>
            <td>
                <input type="text" ng-model="item.interest" ng-readonly="varlist.isreadonly" value={ {item.interest}} ng-class="{true:'inactive',false:'active'}[varlist.isreadonly]" placeholder="interseting">
            </td>
            <td class="options">
                <!-- 編輯 -->
                <edit></edit>
                <!-- 刪除當前行 -->
                <delete></delete>
                <!-- 放棄全部編輯 -->
                <reset></reset>
            </td>
        </tr>
        <tr>
            <!-- 增長一行 -->
            <td colspan="5">
                <add></add>
            </td>
        </tr>
    </table>
    <script type="text/javascript">
    var app = angular.module("mapp", []);
    app.controller("mtable", function($scope) {
        // 數據源
        $scope.items = [{
            name: "張三",
            age: 20,
            id: 111,
            interest: "看書"
        }, {
            name: "李四",
            age: 22,
            id: 222,
            interest: "寫字"
        }, {
            name: "王二小",
            age: 23,
            id: 333,
            interest: "電影"
        }, {
            name: "隔壁老王",
            age: 5,
            id: 444,
            interest: "泡妞"
        }];
        // 爲 reset功能而作的準備，ng中數組的複製，注意使用 angular.copy()和不使用的效果
        $scope.resetArr = angular.copy($scope.items);

        // 接收刪除事件，使用 splice()而不是slice()
        $scope.$on("remove", function(event, data) {
            $scope.items.splice(data, 1);
        });

    // ng-repeat 重複元素上面定義的ng-controller互不影響
    }).controller("row", function($scope) {
        $scope.varlist = {
            isreadonly: true
        }
        // 接收edit事件，由於不用jquery，因此使用ng-readonly指令來操做
        $scope.$on("edit", function() {
            $scope.varlist.isreadonly = false;
        });
    });
    // 下面是四個指令

    app.directive("edit", function() {
        return {
            restrict: "E",
            replace: true,
            // 這裏是在模版中使用ng-click綁定事件，請試試在指令 上綁定事件的方式，有坑
            template: "<input type = 'button' value = 'edit' ng-click='edit()'>",
            link: function(scope, element, attr) {
                scope.edit = function() {
                    // 傳遞的true值是給 $scope.varlist.isreadonly 使用的，意思是改變只讀狀態
                    scope.$emit("edit", true);
                }

            }
        }
    }).directive("delete", function() {
        return {
            restrict: "E",
            replace: true,
            template: "<input type = 'button' value = 'delete' ng-click='remove($index)'>",
            link: function(scope, element, attr) {
                scope.remove = function($index) {
                    scope.$emit("remove", $index);

                }
            }
        }
    }).directive("reset", function() {
        return {
            restrict: "E",
            replace: true,

            template: "<input type = 'button' value = 'reset' ng-click='reset($index)'>",
            link: function(scope, element) {
                //代碼很簡單，可是你丫就是想不起來使用angualr.copy()
                scope.reset = function($index) {
                    scope.items[$index] = angular.copy(scope.resetArr[$index]);
                }

            }
        }
    }).directive("add", function() {
        return {
            restrict: "E",
            template: "<button ng-click = 'add()'>增長新行</button>",
            replace: true,
            link: function(scope) {
                scope.add = function() {
                    // 數據驅動
                    scope.items.push({});
                }
            }
        }
    });
    </script>
</body>
</html>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。