Динамическая смена ярлыка кнопки внутри ng-repeat

Question

Рассмотрим простой ng-repeat, который создает директиву на каждой итерации. Каждая директива содержит кнопку, которая запускает функцию. Эти кнопки должны иметь ярлык, установленный в «Показать», и при нажатии кнопки «Скрыть» следует нажать кнопку «Скрыть». Когда я нажимаю кнопку, я хочу проверить, есть ли другие кнопки, установленные для «скрыть»: если да, они должны вернуться к «показать». В основном моя цель состоит в том, чтобы иметь только одну кнопку с ярлыком, установленным на «Скрыть», другие должны всегда быть «Показать». Как я могу это сделать?

<div ng-repeat="campaign in $root.transactions"> 
    <my-directive campaign='campaign' index='$index></my-directive> 
</div> 

myDirective.html:

<div> 
..some stuff... 
<button ng-click="toggleDetail()">{{labelButton}}</button> 
</div> 

ЯШИ:

$scope.labelButton = 'Show'; 
$scope.detailOpened = false; 
$scope.labelButton = 'Show'; 
$scope.$root.selectedIndex = -1; 

$scope.toggleDetail = function($event, index){ 

     ...do stuff... 


     $scope.detailOpened = !$scope.detailOpened; 
     $scope.$root.selectedIndex = index;  
     $(element).toggleClass('selectedActivity');   

     if($scope.detailOpened === false) { 
      $scope.labelButton = 'Show'; 
     }else { 
      $scope.labelButton = 'Hide'; 
     }      
    }; 

Answer 1

С нг-повтором, вы будете нуждаться в массиве в $ объеме. Использование директивы будет, но может и не понадобиться.

Я сделал jsfiddle здесь: http://jsfiddle.net/goodman/z9kg0md0/15/embedded/result/

Интересно, если это то, что вы хотите. Коды здесь:

angular.module("MyApp",[]) 
    .controller('myController', [ '$scope', function($scope){ 
     $scope.buttons = [ 
     { detailOpened: false, label: 'Show1'}, 
     { detailOpened: false, label: 'Show2'}, 
     { detailOpened: false, label: 'Show3'}, 
     { detailOpened: false, label: 'Show4'}, 
     { detailOpened: false, label: 'Show5'}  
     ]; 

     $scope.toggleDetail = function(index){ 
     $scope.buttons[index].detailOpened = !$scope.buttons[index].detailOpened;  
     if(!$scope.buttons[index].detailOpened) { 
       $scope.buttons[index].label = 'Show'; 
     }else { 
       $scope.buttons[index].label = 'Hide'; 
     } 
      if($scope.buttons[index].detailOpened){ 
      for(var i = 0; i < $scope.buttons.length ; i++){ 
      if(i != index && $scope.buttons[i].detailOpened) { 
       $scope.buttons[i].detailOpened = false;  
       $scope.buttons[i].label = 'Show'; 
      } 
      } 
     } 
     }; 
    }]); 

и HTML:

<div ng-app="MyApp" ng-controller="myController"> 

    <div ng-repeat="button1 in buttons"> 
    <button ng-click="toggleDetail($index)"> 
     {{button1.label}}  
    </button> 
    </div> 
</div>