Angularjs 打开div onClick作为内容弹出窗口

我的问题是，当单击一个div时，所有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;
    }

});

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

HTML:

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

});

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

{{感激.赞赏}

{{precurve.custContent}

---

请告知

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

您还尝试将对象用作数组中的索引，这是不可能的

以下是您所需要的：

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

并且认为：

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

{{precurve.custContent}