在不同的班級

使用相同的NG-點擊所以事情是：在不同的班級

我有四張牌，我對第一個與命名OpenCard()功能的ng-click。
當我點擊，它顯示其隱藏的內容。我想爲其餘的卡片使用相同的電話OpenCard()。
我的四個類具有相同的名稱「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上如何使用相同功能來指定一張卡？因爲當我點擊一張封閉的卡片時，它會顯示所有卡片的內容。

來源

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

在不同的班級

回答

相關問題