Question

所以我有以下工作流程：

我有一个项目列表，每个项目都有ng-click个事件，会在点击项目下方打开iframe 。现在，

点击列表中的项目后，该项目下方的div标记会显示（最初隐藏），其中包含iframe。
现在点击同一列表中的其他项目时，另一个div标记会显示在最近点击的项目下方，该标记会显示最近点击的项目的iframe。

我面临的问题就是这个 -

点击列表中的某个项目时，如果包含div的任何iframe标记当前处于打开状态，则会关闭该标记，div标记以及iframe显示最近点击的项目。

目前，如果打开任何iframe，点击列表中的其他项目时，最近点击的项目的新iframe会打开，初始iframe仍然保持打开状态。只有在我点击它之后才会关闭它。

我该怎么办？

PS：我希望情况很明确，如果需要进一步澄清，请告诉我。

修改 -

发布jsfiddle链接有点难，因为这个问题是我正在处理的大文件夹的一部分。但是，我会在这里发布代码并希望它就足够了。

HTML：

<div ng-repeat="data in JsonData">
    <div class="row" ng-click="getGraph(data.id, $index)">
        <div class="col-lg-6 text-left">
            <span id="title">Title: &nbsp;{{data.name}}</span><br><br>
            <span style="color: #000 !important">
                <strong>Id:</strong> &nbsp;{{data.id}}
            </span><br/><br>
        </div>
        <div class="col-lg-4 text-left" style="color: #000 !important;">
            <span style="text-align: left; font-size: 13px;">
                  <strong>Details:</strong> {{data.details}}
            </span><br/>
        </div>
        <div class="iframe col-lg-10 col-lg-offset-2">
            <div class="ibox float-e-margins ibox_shadow">
                <iframe style="width: 80%; height: 50%; id="targetframe" name="targetframe" allowTransparency="true" scrolling="no" frameborder="0" ng-src="{{graphUrl | trustAsResourceUrl}}">
                </iframe>
            </div>
        </div>
    </div>
</div>

controller.js 代码：

$scope.getGraph = function(d,i) {
        $scope.graphUrl = 'http://server-url.com:8888/path/to/theGraph?id='+d;
        var elem = document.getElementsByClassName(d);
        $(elem).toggleClass('class_to_toggle_hide_show');
}

Answer 1

如果您发布代码，它将清除更多。但是在ng-click事件中你可以先说ng-click =＆＃34; youfunction（$ event）＆＃34; 和

$scope.yourfunction = function(event){
   $(even.target).find("iframe").remove();
   //and then your other stuff here  

}

在AngularJS（iframe）中的项目列表上切换单击功能

1 个答案: