在不同的班级

使用相同的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

在不同的班级

回答

相关问题