<div ng-app="myApp"> <div ng-controller="myController"> <table> <tr data-ng-repeat="row in list"> <th rowspan="{{list.length}}" data-ng-show="$first">테이블 헤드</th> <td> <input type="text" data-ng-model="row.name" class="text"/> <span> <a href="javascript:;" data-ng-click="clickListener('btn_delete_row', $index)">삭제</a> <a href="javascript:;" data-ng-click="clickListener('btn_find_row', $index)">검색</a> <a href="javascript:;" data-ng-click="clickListener('btn_add_row', $index)" data-ng-show="$last && $index < 4">행 추가</a> </span> </td> </tr> </table> <br/><br/> <div data-ng-show="name"><hr/><br/>검색 내용은 {{name}} 입니다.</div> <div data-ng-hide="name"><hr/><br/>검색 내용이 없습니다.</div> </div> </div>
(function(){ var myApp = angular.module('myApp', []); myApp.controller('myController', function($scope){ //리스트 데이터 $scope.list = [{ name: "" }]; //[버튼 클릭 리스너] $scope.clickListener = function ( parameter, index ) { switch( parameter ) { case 'btn_delete_row': if( $scope.list.length > 1 ) { $scope.list.splice(index, 1); } else { $scope.list = [{ name: "" }]; } break; case 'btn_find_row': $scope.name = $scope.list[index].name; break; case 'btn_add_row': $scope.list.push([{ name: "" }]); break; } }; }); })();