Специальная вкладка md-вкладок в ng-repeat

Question

Чего я хочу достичь: У меня есть объект с именем data, который содержит массив сообщений. С помощью ng-repeat я перебираю все сообщения и показываю их. Каждое сообщение содержит заголовок, вкладки md и кнопку «ПОСЛЕДНЯЯ вкладка текущего сообщения». На вкладках md есть 3 вкладки: «Опубликовать», «Содержимое» и «Обзор». Если я нажму на кнопку h4, должна появиться последняя вкладка этого конкретного сообщения (в данном случае «Просмотр»).

Что у меня так далеко:

HTML

    <ul>
     <li ng-repeat="messages in data">
       <h2 class="namePost"> {{messages.title}}</h2>
       <div ng-cloak>
         <md-content>
           <md-tabs md-selected="selectIndex" md-align-tabs="bottom"
                    md-center-tabs="true" class="md-no-animation"
                    md-no-ink md-no-bar>
             <md-tab label="Post">
               <md-content>
                 <h1>test text</h1>
               </md-content>
             </md-tab>
             <md-tab label="Content">
               <md-content>
                 <h1>test text</h1>
               </md-content>
             </md-tab>
             <md-tab label="Review">
               <md-content>
                 <p> blabla </p>
               </md-content>
             </md-tab>
           </md-tabs>
        </md-content>
        <h4 ng-click="latestTab()"> LATEST TAB OF CURRENT MESSAGE</h4>
      </li>
   </ul>

AngularJS

   $scope.latestTab() = function(){
     $scope.selectedIndex = 2;
   }

Если я сейчас нажму на кнопку h4, все сообщения перейдут на последнюю вкладку. Однако я не хочу, чтобы каждое сообщение показывало последнюю вкладку, а только ту, на которую я нажал.

Answer 1

Сделать селектор свойством итератора ng-repeat:

 <li ng-repeat="messages in data">
   <md-tabs md-selected="s̶e̶l̶e̶c̶t̶I̶n̶d̶e̶x̶ messages.selectIndex"
            md-align-tabs="bottom"
            md-center-tabs="true" class="md-no-animation"
            md-no-ink md-no-bar>
       <!-- ..... -->
   </md-tabs>

    <h4 ng-click="latestTab(messages)"> LATEST TAB OF CURRENT MESSAGE</h4>
 </li>

Затем установите значение для этого итератора:

   $scope.latestTab = function(messages){
     messages.selectedIndex = 2;
   }