Angular.js: ng-if๋ฅผ ์‚ฌ์šฉํ•  ๋•Œ $parent.$index๊ฐ€ ์†์‹ค๋˜์—ˆ์Šต๋‹ˆ๋‹ค.

์— ๋งŒ๋“  2015๋…„ 09์›” 10์ผ  ยท  3์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: angular/angular.js

๋‚ด HTML ์ฝ”๋“œ

 <div>
 <์šธ>
 <li ng-repeat='arr1์˜ parentItem'>
 <div ng-repeat='arr2์˜ ์ž์‹ ํ•ญ๋ชฉ'>
 {{ $parent.$index }} , {{ $index }}
 </div>
 </li>
 </ul>
 </div>

์ปจํŠธ๋กค๋Ÿฌ ๋‚ด๋ถ€์˜ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์ฝ”๋“œ

 $scope.arr1 = [1,2];
 $scope.arr2 = [1,2];

๋‚˜์—๊ฒŒ ์ •๋‹ต์„์ฃผ๋Š”์ด ์ฝ”๋“œ

 0, 0
 0, 1
 1, 0,
 1, 1

๊ทธ๋Ÿฌ๋‚˜ ์ž์‹ ๋ฃจํ”„์—์„œ ng-if="true" ๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ์ž˜๋ชป๋œ ๋Œ€๋‹ต์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค.

 <div>
 <์šธ>
 <li ng-repeat='arr1์˜ parentItem'>
 <div ng-repeat='arr2์˜ ์ž์‹ ํ•ญ๋ชฉ' ng-if="true">
 {{ $parent.$index }} , {{ $index }}
 </div>
 </li>
 </ul>
 </div>
 0, 0
 1, 1
 0, 0
 1, 1

์ด๊ฒƒ์€ ํ‹€๋ ธ๋‹ค. ๋ถ€๋ชจ ์ธ๋ฑ์Šค๋ฅผ ์ž์‹ ์ธ๋ฑ์Šค๋กœ ๋ณ€๊ฒฝ

์ด ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•˜์‹ญ์‹œ์˜ค

๊ฐ€์žฅ ์œ ์šฉํ•œ ๋Œ“๊ธ€

์ด๊ฒƒ์€ Angular์˜ ๋ฌธ์ œ๊ฐ€ ์•„๋‹™๋‹ˆ๋‹ค. ์ด๊ฒƒ์€ ngIf ๊ฐ€ ์ƒˆ ๋ฒ”์œ„๋ฅผ ์ƒ์„ฑํ•˜๋ฏ€๋กœ $parent ๊ฐ€ ์™ธ๋ถ€ ngRepeat ์˜ ๋ฒ”์œ„๋ฅผ ์ฐธ์กฐํ•˜์ง€ ์•Š๊ธฐ ๋•Œ๋ฌธ์— ๋ฐœ์ƒํ•ฉ๋‹ˆ๋‹ค( ๋ฌธ์„œํ™”๋จ ).

์ด๊ฒƒ์ด ์—ฌ๊ธฐ์„œ $parent ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ด ์ข‹์€ ๋ฐฉ๋ฒ•์ด ์•„๋‹Œ ์ด์œ ์ž…๋‹ˆ๋‹ค. ngInit ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋‹ค์Œ๊ณผ ๊ฐ™์ด ์ƒ์œ„ ์ธ๋ฑ์Šค์˜ ๋ณ„์นญ์„ ๋งŒ๋“ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

<li ng-repeat="parentItem in arr1" ng-init="parentIdx = $index">
  <div ng-repeat="childItem in arr2" ng-if="true">
    {{ parentIdx }} , {{ $index }}
  </div>
</li>

๋ฐ๋ชจ

๋ชจ๋“  3 ๋Œ“๊ธ€

์ด๊ฒƒ์€ Angular์˜ ๋ฌธ์ œ๊ฐ€ ์•„๋‹™๋‹ˆ๋‹ค. ์ด๊ฒƒ์€ ngIf ๊ฐ€ ์ƒˆ ๋ฒ”์œ„๋ฅผ ์ƒ์„ฑํ•˜๋ฏ€๋กœ $parent ๊ฐ€ ์™ธ๋ถ€ ngRepeat ์˜ ๋ฒ”์œ„๋ฅผ ์ฐธ์กฐํ•˜์ง€ ์•Š๊ธฐ ๋•Œ๋ฌธ์— ๋ฐœ์ƒํ•ฉ๋‹ˆ๋‹ค( ๋ฌธ์„œํ™”๋จ ).

์ด๊ฒƒ์ด ์—ฌ๊ธฐ์„œ $parent ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ด ์ข‹์€ ๋ฐฉ๋ฒ•์ด ์•„๋‹Œ ์ด์œ ์ž…๋‹ˆ๋‹ค. ngInit ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋‹ค์Œ๊ณผ ๊ฐ™์ด ์ƒ์œ„ ์ธ๋ฑ์Šค์˜ ๋ณ„์นญ์„ ๋งŒ๋“ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

<li ng-repeat="parentItem in arr1" ng-init="parentIdx = $index">
  <div ng-repeat="childItem in arr2" ng-if="true">
    {{ parentIdx }} , {{ $index }}
  </div>
</li>

๋ฐ๋ชจ

BTW, ์ด๊ฒƒ์€ ์ผ๋ฐ˜์ ์ธ ์ง€์› ์งˆ๋ฌธ์ž…๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌํ•œ ์งˆ๋ฌธ์€ ์ ์ ˆํ•œ ์ฑ„๋„ ๋กœ ๋” ์ž˜ ์ „๋‹ฌ๋˜์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.
GitHub ๋ฌธ์ œ๋Š” ๋ฒ„๊ทธ ๋ณด๊ณ ์„œ ๋ฐ ๊ธฐ๋Šฅ ์š”์ฒญ์„ ์œ„ํ•ด ์˜ˆ์•ฝ๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค.

๊ฐ์‚ฌ ํ•ด์š”,

ng-init๋กœ ์ด๊ฒƒ์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ด ํŽ˜์ด์ง€๊ฐ€ ๋„์›€์ด ๋˜์—ˆ๋‚˜์š”?
0 / 5 - 0 ๋“ฑ๊ธ‰