Question

所以问题是：

我有四张卡片，第一张卡片上有ng-click，其中有一个名为OpenCard()的函数。
点击后，会显示其隐藏的内容。我想对其他卡片做同样的事情，使用同一个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;
    }
  }

我正在使用Angular 1.6.0 您是否知道我如何使用ng-click上的相同功能来特定地引用一张卡？因为当我点击一张封闭的卡片时，它会显示所有卡片的内容。

Answer 1

您可以将卡片的可见性存储在数组（$scope.cardsVisible = [];）中，并在每次调用时将索引传递给OpenCard(cardIndex)。

然后，在您的视图中条件显示：

＆＃13;

var myApp = angular.module('myApp', []);

function MyCtrl($scope) {
  $scope.cardsVisible = [];

  $scope.OpenCard = function(cardIndex) {
      $scope.cardsVisible[cardIndex] = true;
      $scope.isActive = cardIndex;
  }
}

＆＃13;

.active {
  background-color: red;
}

＆＃13;

<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>

＆＃13;

Answer 2

       <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
 }

Answer 3

＆＃13;

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'
  }];
}]);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html ng-app="ngClickApp">
<head>
	<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>

＆＃13;

在不同的类中使用相同的ng-click

3 个答案: