<!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>
本來編輯了一堆話，一不小心沒保存，現在又不想重寫了。
AngularJS 實現 Table的一些操作(示例大於實際)
免責聲明！
本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。