Я хочу расширить строку в таблице?

Question

У меня есть этот fillder http://jsfiddle.net/LgrNF/245/ Что я пытаюсь сделать, когда пользователь нажимает на номер 1, чтобы открыть строку ниже 1 и отобразить сообщение: «Некоторое сообщение», и если он нажмет на номер 2, чтобы открыть строку ниже 2 и так далее , Но у меня небольшая проблема. Любое предложение?

app = angular.module("App", []); 

app.controller("AppCtrl", function($scope) { 
    $scope.message = "Some message"; 
    $scope.items = [1,2,3,4,5,6,7]; 
    $scope.toggleDetail = function($index) { 
     //$scope.isVisible = $scope.isVisible == 0 ? true : false; 
     $scope.activePosition = $scope.activePosition == $index ? -1 : $index; 
    }; 
}); 

EDIT: Я загрузил новую скрипача, где я получаю сообщение на нижней части страницы

Answer 1

По добавить повтор на tbody вместо tr вы можете сделать это. Вы сможете сделать второй tr, содержащий сообщение. Затем вы покажете его, только если ваша $index является активной позицией.

<tbody ng-repeat="iteam in items"> 
    <tr> 
     <td>{{iteam}}</td> 
     <td class="main-row" ng-click=toggleDetails($index)>Click</td> 
    </tr> 
    <tr ng-show="activePosition == $index"> 
     <td>{{message}}</td> 
    </tr> 
</tbody> 

Working Fiddle