Angularjs ng-table的使用(可以加button)以及angularjs學習資料
題記：現在做的這個項目，前端框架用的是AngularJS，所以就又學習起來了。說下最近的近況，最近小論文已經寫完了，但是還沒有找老師看，想盡快投出去，另外工作現在網易應該是跪了，其他的還沒開始投起來，發現華為在濟南有研發崗位，爭取可以到濟南研發崗，另外也希望公司這邊可以留下，現在每天在公司code，都沒有時間好好准備一面試，一定要在有空的時候，好好看下Java的設計模式，多線程，文件流以及網絡方面的CCNA，數據結構方面也要過一下，加油吧，騷年！！
1 angularjs學習資料
angularjs，又一個mvc模式的前端框架，我感覺最叼的是用ng-model或是{{}}實現的雙向數據綁定，這個非常棒，這個前端框架學起來確實費勁，現在附上當時學習的資料：慕課網的學習視頻可以看下http://www.imooc.com/view/156要自己動手敲代碼，建議用sublime，可以把angularjs的插件下載下來，非常好用，感覺sublime真是神器，代碼顯示的非常性感。再看下angularjs 菜鳥教程，一定要記住“一切是從module模塊開始”，這里的module不是mvc的m model，mvc中的m是數據模型。然后還有個網站ngnice,可以查看api也可以看到一些應用案例，感覺這些應用案例非常棒。大概就是這些。
2 angularjs的ng-table
ng-tabled的學習資料是：http://ng-table.com/#/demo/0-1，這個網站中出現的demo的代碼http://download.csdn.net/detail/u011563903/9099359我所用的ng-table的例子就是在這里面的demo30改的，可以自己一個一個的去看下。
3 最近兩天寫的ng-table的（主要是根據上面的demo30例子改的）
第一、二個圖是我的demo的圖，點擊table中的button如果有數據顯示的話就會彈出下面的進行顯示。第三張圖是我的項目中用到的。
主要代碼：
[javascript] view plain copy
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<!--[if lt IE 9]>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<![endif]-->
<script src="js/angular.min.js"></script>
<script src="../dist/ng-table.js"></script>
<link rel="stylesheet" href="../dist/ng-table.css">
<style type="text/css">
.nestedTblGutter {
padding-right: : 30px;
}
</style>
</head>
<body ng-app="main">
<h1>Nested tables</h1>
<div ng-controller="DemoCtrl">
<p><strong>Parent Table Page:</strong> {{parentTableParams.page()}}
<p><strong>Parent Table Count per page:</strong> {{parentTableParams.count()}}
Search: <input ng-model="searchText">
<table ng-table="parentTableParams" class="table ng-table-responsive table-condensed table-hover">
<tbody>
<tr ng-repeat-start="parent in $data | filter:searchText">
<td data-title="'Name'" ng-bind="parent.name"></td>
<td data-title="'Age'" ng-bind="parent.age"></td>
<td data-title="'Children1'">
<button type="button" class="btn btn-default btn-xs" ng-click="selectedParent = (selectedParent == null ? parent : null);flag1='true';flag2='false'" ng-disabled="!parent.children1.length">
<i class="glyphicon glyphicon-chevron-down" ng-hide="(selectedParent != null) && (flag2=='false')"></i>
<i class="glyphicon glyphicon-chevron-up" ng-show="(selectedParent != null) && (flag2=='false')"></i>
</button>
<span class="badge" ng-bind="parent.children1.length || 0"></span>
</td>
<td data-title="'Children2'">
<button type="button" class="btn btn-default btn-xs" ng-click="selectedParent = (selectedParent == null ? parent : null);flag2='true';flag1='false'" ng-disabled="!parent.children2.length">
<i class="glyphicon glyphicon-chevron-down" ng-hide="(selectedParent != null) && (flag1=='false')"></i>
<i class="glyphicon glyphicon-chevron-up" ng-show="(selectedParent != null) && (flag1=='false')"></i>
</button>
<span class="badge" ng-bind="parent.children2.length || 0"></span>
</td>
</tr>
<tr ng-repeat-end ng-if="(selectedParent == parent)">
<td colspan="1" ng-controller="DemoChildrenCtrl" ng-if="flag1=='true'">
{{flag1}}
<div class="nestedTblGutter">
<table ng-table="childrenTableParams" class="table ng-table-responsive table-condensed table-bordered table-hover">
<tr ng-repeat="child1 in selectedParent.children1 | filter:searchText">
<td data-title="'Name'" ng-bind="child1"></td>
</tr>
</table>
</div>
</td>
<td colspan="1" ng-controller="DemoChildrenCtrl" ng-if="flag2=='true'">
{{flag1}}
<div class="nestedTblGutter">
<table ng-table="childrenTableParams" class="table ng-table-responsive table-condensed table-bordered table-hover">
<tr ng-repeat="child1 in selectedParent.children2 | filter:searchText">
<td data-title="'Name'" ng-bind="child1"></td>
<!-- <td data-title="'Phone'" ng-bind="child.phone"></td> -->
</tr>
</table>
</div>
</td>
</tr>
</tbody>
</table>
<script>
var app = angular.module('main', ['ngTable']).
controller('DemoCtrl', function($scope,$filter, ngTableParams) {
var data = [
{"age":25,"name":"Calderon Morgan","ip":"192.178.0.1","children2":["hao2","fan2","sss2"]},
{"age":22,"name":"Sullivan Cruz","ip":"182.190.1.1","children2":["hao2","fan2","sss2"]}
];
$scope.parentTableParams = new ngTableParams({
page: 1, // show first page
count: 10 // count per page
}, {
total: data.length, // length of data
getData: function($defer, params) {
$defer.resolve(data.slice((params.page() - 1) * params.count(), params.page() * params.count()));
}
});
}).controller("DemoChildrenCtrl", function($scope, ngTableParams){
//Children Table
console.log("DemoChildrenCtrl");
$scope.childrenTableParams = new ngTableParams({
page: 1, // show first page
count: 10 // count per page
}, {
total: 0, // length of data
getData: function($defer, params){
$defer.resolve($scope.selectedParent.children1.slice((params.page() - 1) * params.count(), params.page() * params.count()));
}
});
});
</script>
</div>
</body>
</html>
感3覺angularjs真心強大，可以在dom中寫表達式，比方ng-if 還有ng-click真心叼。注意里面的幾個對於兩個button，控制的邏輯，反正這個邏輯需要靜下心來去看。
有兩個坑：
（1）ng-repeat-end 指令只有一個，所以我把兩個children的內容放在了一個ng-repeat-end里面，然后在這里面去寫了兩個ng-repeat，去顯示children
（2）寫angularjs一定要注意不要輕易使用“-”，因為這個應該是在angularjs中是類似關鍵字一樣的，如果要用它，需要進行轉義。代碼中如果把所有的name改成name-name則name這一列會顯示0.
（3）在我項目中，我通過ajax請求后，獲得數據，是一個Stirng，類似"[{"ip":"192.168.1.1","name":"fanhao"},{"ip":"192.168.1.1","name":"fanhao"}]"，我在之前另一個項目中單純使用js或者jQuery的代碼中通過使用JSON.parse就可以轉成[{"ip":"192.168.1.1","name":"fanhao"},{"ip":"192.168.1.1","name":"fanhao"}],但是angularjs就是不行，我最后通過返回list實現的，以后如果想返回一系列的數據還是返回list比較好。
最后附一張我項目中的圖，比較丑陋，還沒有美化：
http://blog.csdn.net/u011563903/article/details/48377299
