javascript - 动态更改 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>

js:

$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

使用 ng-repeat，您将需要 $scope 中的一个数组。使用指令就可以，但可能不是必需的。

我在这里做了一个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>