<!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>

本来编辑了一堆话，一不小心没保存，现在又不想重写了。