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