Question

我的问题是，当点击一个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;
    }

});

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>

打开div onClick弹出内容

1 个答案: