打开div onClick随着内容弹出

Question

我的问题是所有我的div在单击时同时打开。相反，我只希望一个div能够以其点击内容的弹出方式进行缩放和增长。

控制器：

var app = angular.module('angulo', []); 
app.controller('testController', function ($scope, $location, $rootScope, $log) { 

    $scope.CustAppre = [   
    {appre:"Project Appreciation",by:"Ziva Roe",custContent:"1 You are doing a very good job"}, 
    {appre:"Agile Work Process",by:"Joe Roe",custContent:"2 You are doing a very good job"}, 
    {appre:"Customer Speaks",by:"Michael Charles",custContent:"3 You are doing a very good job"}, 
    {appre:"Work Appreciation",by:"Gwen Charles",custContent:"4 You are doing a very good job"}, 
    {appre:"Leadership Appreciation",by:"Joe Roe",custContent:"5 You are doing a very good job"}, 
    {appre:"Agile Appreciation",by:"Sherlee James",custContent:"6 You are doing a very good job"},   
    ]; 

    $scope.hiddenElements = []; 
    $scope.IsElemVisible = function(elemId) { 
     return $scope.hiddenElements[elemId]; 
    } 
    $scope.openBigDiv = function (elemId) { 
     $scope.hiddenElements[elemId] = true; 
    } 

}); 

HTML：

<div ng-controller="testController"> 

    <div class="col-xs-12 col-sm-6 col-lg-4 checkContent" ng-repeat = "appreciate in CustAppre"> 
       <div class="quote-inner-wrapper"> 
        <div class="arrow_box blue-texture-bg" ng-click = "openBigDiv(appreciate)"> 
         <blockquote class="no-bg white quotation-white"> 
          <p>{{appreciate.appre}}</p> 
          <div ng-show="IsElemVisible(appreciate)">{{appreciate.custContent}}</div> 
         </blockquote> 
        </div> 
        <a role="button" class="customerName blue" href="#">{{appreciate.by}}</a>   
       </div> 
    </div> 

</div> 

<script type="text/javascript" src = "test.js"></script> 

请指教。 Here is the fiddle。

Answer 1

通过尝试使用另一个数组来存储打开的“appre”（这是什么意思？为什么不使用真正的英文名？），使自己的生活变得复杂。

你也试图使用对象作为数组中的索引，这是不可能的。

这里就是你需要：

$scope.openBigDiv = function(appre) { 
    appre.opened = true; 
}; 

，并在视图：

<div ng-show="appreciate.opened">{{appreciate.custContent}}</div>