異なるクラスで同じngのクリックを使用して

私は4枚のカードを持っていると私はOpenCard()という名前の関数を持つ最初の1にng-clickを持っています。
をクリックすると、非表示のコンテンツが表示されます。私はOpenCard()と同じ呼び出しを使用して残りのカードについて同じ処理を行います。
私の4つのクラスが同じ名前 "rowCont" を持っており、その "rowCont" 内の隠された内容が異なっている：

<div class="rowCont" ng-click="OpenCard()" ng-class="{'active': isActive}">  
    <div class="hiddenContent"> 
     <div class="animate-show" ng-show="cardVisible"> 

     </div> 
    </div> 
</div>

$scope.isActive = false; 
$scope.OpenCard = function() { 
    if($scope.isActive == false) { 
     $scope.isActive = true; 
     $scope.cardVisible = true; 
    } else { 
     $scope.isActive = false; 
     $scope.cardVisible = false; 
    } 
    }

私はアンギュラ使用しています1.6.0 ng-clickで同じ機能を使用して特定のカードを参照するにはどうすればよいですか？なぜなら、閉じたカードを1つクリックすると、すべてのカードの内容が表示されるからです。

出典

2017-08-28 Inês Borges

をあなたは 'NG-repeat'でカードを表示していますか？ – Mistalis

各カードのIDはありますか？彼らをユニークにする何か？ –

-1

カードの可視性を配列（$scope.cardsVisible = [];）に格納し、各呼び出しでインデックスをOpenCard(cardIndex)に渡すことができます。

次に、あなたのビューでconditionnalyそれを表示：

var myApp = angular.module('myApp', []); 
 

 
function MyCtrl($scope) { 
 
    $scope.cardsVisible = []; 
 

 
    $scope.OpenCard = function(cardIndex) { 
 
     $scope.cardsVisible[cardIndex] = true; 
 
     $scope.isActive = cardIndex; 
 
    } 
 
}

.active { 
 
    background-color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<div ng-app="myApp" ng-controller="MyCtrl"> 
 
    <div ng-click="OpenCard(1)" ng-class="{'active': isActive == 1}"> 
 
    Card 1 
 
    <div ng-show="cardsVisible[1]"> 
 
     This card is visible 
 
    </div> 
 
    </div> 
 

 
    <div ng-click="OpenCard(2)" ng-class="{'active': isActive == 2}"> 
 
    Card 2 
 
    <div ng-show="cardsVisible[2]"> 
 
     This card is visible 
 
    </div> 
 
    </div> 
 
</div>

出典

2017-08-28 10:13:21 Mistalis

@downvoterあなたがダウン投票した理由を知りたいのですが、私は自分の答えを改善することができますか？ありがとう – Mistalis

-1

 <div class="row"> 
       ng-repeat="x in current_tab 
       ng-class="{active1 : activeMenu === x}" 
       ng-click="setActive(x);"> {{x.userId}} 
     </div> 

$scope.menuItems = $rootScope.current_tab; 
$scope.activeMenu = $scope.menuItems[0]; 
$scope.setActive = function(menuItem) { 
    $scope.activeMenu = menuItem 
}

出典

2017-08-28 10:19:12

-1

var app = angular.module("ngClickApp", []); 
 
app.controller('ngClickCtrl', ['$scope', function ($scope) { 
 
$scope.cards = [{ 
 
    isActive: false, 
 
    title: '1', 
 
    content: 'content 1' 
 
    }, { 
 
    isActive: false, 
 
    title: '2', 
 
    content: 'content 2' 
 
    }]; 
 
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<html ng-app="ngClickApp"> 
 
<head> 
 
\t <title>Validation messages</title> 
 
</head> 
 
<body ng-controller="ngClickCtrl"> 
 
<div class="rowCont" ng-repeat="card in cards track by $index" ng-click="card.isActive=!card.isActive" ng-class="{'active': c.isActive}"> 
 
    card {{$index}} 
 
    <div class="hiddenContent"> 
 
     <div class="animate-show" ng-show="card.isActive"> 
 
     {{card.content}} 
 
     </div> 
 
    </div> 
 
    </div> 
 
</body> 
 
</html>

出典

2017-08-28 11:19:09

異なるクラスで同じngのクリックを使用して

答えて

関連する問題