μλ
,
μ μ²΄κ° μλ νλμ ν
μ΄λΈ ν€λλ§ μ¬μ μν μ μμ΅λκΉ? μ¬μ©μ μ μ 첫 λ²μ§Έ μ΄(λ©μ§ 체ν¬λ°μ€ 첫 λ²μ§Έ μ΄)μ΄ μλ μ λ ¬ κ°λ₯ν ν
μ΄λΈμ μν©λλ€. νμ¬ μ λ ¬μ λͺ¨λ λ
Όλ¦¬λ tbody > trμ μμ΅λλ€. λλ ad > thκ° μμΌλ©° μ΄κ²μ΄ λ΄ μ½λκ° μ΄λ»κ² μκ²Όλμ§μ
λλ€.
<tbody>
<tr ng-repeat="foo in fooList">
<td data-title="'Name'" class="" data-sortable="'name'">
μ΄μ λ΄ μ½λλ λ€μκ³Ό κ°μ΅λλ€.
<thead>
<!--custom first column header-->
<!--boilerplate header-->
<th ng-class="{
'sort-asc': tableParams.isSortBy('name', 'asc'),
'sort-desc': tableParams.isSortBy('name', 'desc')
}"
ng-click="tableParams.sorting({'name' : tableParams.isSortBy('name', 'asc') ? 'desc' : 'asc'})">
<div>Name</div>
</th>
<!--the rest of the column definitions which are similar to the previous one-->
</thead>
<tbody>
<!--custom first column data-->
<tr ng-repeat="foo in fooList">
<td data-title="'Name'" class="" data-sortable="'name'">
λλ μ΄ μλ₯Ό λ°λκΈ° λλ¬Έμ κ·Έλ κ² νλ€: http://bazalt-cms.com/ng-table/example/18
κ°λ¨ν κΈ°λ³Έ μ λ ¬ κ°λ₯ν μ΄(첫 λ²μ§Έ μμ μμ μ¬μ©νλ κ²μ²λΌ)μ κ°μ§ μ μκ³ μ²« λ²μ§Έ μμ μμλ§ μ¬μ©μ μ μ νλͺ©μ κ°μ§ μ μλ λ°©λ²μ΄ μμ΅λκΉ? λ§μ μ΄μ΄ μκ³ μμ©κ΅¬ μ λ ¬ κ°λ₯ν νλͺ©μ΄ λ΄ μ½λλ₯Ό λ§μ΄ 볡μ‘νκ² λ§λ€κ³ DRYκ° μλλλ€.
ν΄κ²° λ°©λ²μ ν€λμ λν λλ§μ μ¬μ©μ μ§μ μ§μλ¬Έμ λ§λλ κ²μ΄μ§λ§ λ κ°λ¨ν μ루μ μ΄ μκΈ°λ₯Ό λ°λμ΅λλ€.
κ°μ¬ν©λλ€!
κ·Έλ λ ν μμμ΄.
λ€μκ³Ό κ°μ΄ κ°λ¨ν μ¬μ©μ μ§μ ν νλ¦Ώμ λ§λλλ€.
<script id="expandAllHeader" type="text/ng-template">
<span class="expandable" ng-click="toggleExpandAll()">+ / -</span>
</script>
κ·Έλ° λ€μ λ€μκ³Ό κ°μ΄ νΉμ μ΄μ μ μν©λλ€.
<td header="'expandAllHeader'">...</td>
... λμ :
<td data-title="'whatever'">...</td>
@Jeremy-Walton κ°μ¬ν©λλ€! λλ μμ§ μμ ν ꡬνμ νμ§ μμκ³ λ¨μ§ μμ μμΌ λΏμ΄λ©° μλνλ κ² κ°μ΅λλ€. PIλ ng-tableμ΄ μ΄λ»κ² μ¬μ©νλμ§ μμΈν μ΄ν΄λ³΄κ³ λ΄ νΉμ μ¬λ‘μ λν λλ§μ μλ₯Ό λ§λ€ μ μμ΅λλ€. https://github.com/esvit/ng-table/search?utf8=%E2%9C%93&q=type%3D%22text%2Fng-template%22
λ΄λΆμ λ³μλ₯Ό μ΄λ»κ² μ λ¬ν μ μμ΅λκΉ? λ€μκ³Ό κ°μ κ²μ΄ μμ΅λλ€.
<script id="expandAllHeader" type="text/ng-template">
<div>{{this.title}}</div>
<div>{{this.sorting}}</div>
</script>
<td data-title="'Name'" data-sortable="'name'" header="'expandAllHeader'"></td>
ν€λμ λ£μ λͺ¨λ κ²μ λ³Έλ¬Έ 루ν μΈλΆμ λλ¨Έμ§ ν μ΄λΈκ³Ό λμΌν λ²μμμ μ€νλ©λλ€. https://github.com/esvit/ng-table/blob/master/src/ng-table/header.html#L16 λ° https://docs.angularjs.org/api/ng/directive/ngIncludeλ₯Ό μ°Έμ‘°νμΈμ.
this.whatever
λ₯Ό μ¬μ©νλ λμ whatever
λ₯Ό μ¬μ©ν΄μΌ ν©λλ€.
κ°μ¬ν©λλ€!
νμμ μν΄ :P μ΄κ²μ λλ₯Ό μν΄ μΌνμ΅λλ€.
<script id="expandAllHeader" type="text/ng-template">
<div>{{column.title()}}</div>
<div>{{column.sortable()}}</div>
</script>
<table ng-table="tableParams">
<tbody>
<td data-title="'First Name'" data-sortable="'firstname'" header="'expandAllHeader'"></td>
<td data-title="'Last Name'" data-sortable="'lastname'" header="'expandAllHeader'"></td>
κ·Έλ λ ν μμμ΄.
λ€μκ³Ό κ°μ΄ κ°λ¨ν μ¬μ©μ μ§μ ν νλ¦Ώμ λ§λλλ€.
<script id="expandAllHeader" type="text/ng-template"> <span class="expandable" ng-click="toggleExpandAll()">+ / -</span> </script>
κ·Έλ° λ€μ λ€μκ³Ό κ°μ΄ νΉμ μ΄μ μ μν©λλ€.
<td header="'expandAllHeader'">...</td>
... λμ :
<td data-title="'whatever'">...</td>
νλ₯ν. κ·Έλλ μ μ©νλ€!!!
κ°μ₯ μ μ©ν λκΈ
κ·Έλ λ ν μμμ΄.
λ€μκ³Ό κ°μ΄ κ°λ¨ν μ¬μ©μ μ§μ ν νλ¦Ώμ λ§λλλ€.
κ·Έλ° λ€μ λ€μκ³Ό κ°μ΄ νΉμ μ΄μ μ μν©λλ€.
... λμ :