在 ng-repeat 中动态更改按钮标签答案

【问题标题】：Dynamically change button label inside ng-repeat在 ng-repeat 中动态更改按钮标签
【发布时间】：2019-05-05 00:26:00
【问题描述】：

考虑一个简单的 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';
        }                       
    };

【问题讨论】：

标签： javascript angularjs

【解决方案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>

【讨论】：