Ng-table: 전체가 μ•„λ‹Œ ν•˜λ‚˜μ˜ ν…Œμ΄λΈ” ν—€λ”λ§Œ μž¬μ •μ˜ν•  수 μžˆμŠ΅λ‹ˆκΉŒ?

에 λ§Œλ“  2015λ…„ 03μ›” 03일  Β·  6μ½”λ©˜νŠΈ  Β·  좜처: esvit/ng-table

μ•ˆλ…•,
전체가 μ•„λ‹Œ ν•˜λ‚˜μ˜ ν…Œμ΄λΈ” ν—€λ”λ§Œ μž¬μ •μ˜ν•  수 μžˆμŠ΅λ‹ˆκΉŒ? μ‚¬μš©μž μ •μ˜ 첫 번째 μ—΄(멋진 μ²΄ν¬λ°•μŠ€ 첫 번째 μ—΄)이 μžˆλŠ” μ •λ ¬ κ°€λŠ₯ν•œ ν…Œμ΄λΈ”μ„ μ›ν•©λ‹ˆλ‹€. ν˜„μž¬ μ •λ ¬μ˜ λͺ¨λ“  λ…Όλ¦¬λŠ” 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>

λͺ¨λ“  6 λŒ“κΈ€

그래 λ„Œ ν• μˆ˜μžˆμ–΄.

λ‹€μŒκ³Ό 같이 κ°„λ‹¨ν•œ μ‚¬μš©μž 지정 ν…œν”Œλ¦Ώμ„ λ§Œλ“­λ‹ˆλ‹€.

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

ν›Œλ₯­ν•œ. κ·Έλž˜λ„ μœ μš©ν•˜λ‹€!!!

이 νŽ˜μ΄μ§€κ°€ 도움이 λ˜μ—ˆλ‚˜μš”?
0 / 5 - 0 λ“±κΈ‰