如何在ng-click上的列表项中ng-show特定元素?

时间:2019-06-08 12:30:44

标签: javascript angularjs angularjs-ng-repeat

如何在ng-click上显示li内的iframe元素(仅针对特定的被点击对象)?
并使用AngularJs隐藏所有iframe。

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script>
    var app = angular.module("myApp", []);
    app.controller("myCtrl", function ($scope, $http, $sce) {
        var indx;
        $scope.PlayFun = function (order) {
            indx = order;
            // I need this fuction because I do a lot of things inside
        };


    });
</script>

<div data-ng-app="myApp" data-ng-controller="myCtrl">
    <ul style="list-style-type: none">
        <li data-ng-click="PlayFun($index)" data-ng-repeat="x in records">
            <div data-ng-if="indx === $index">
                <iframe id="video" style="width: 100%; height: 300px;" 
                        data-ng-src="{{videoSource}}" allowfullscreen>
                </iframe>
            </div>
        </li>
    </ul>
</div>

我所需要的全部是:
我需要通过单击li来执行PlayFun。并通过$ index显示iframe。

1 个答案:

答案 0 :(得分:0)

您应该indx 中创建属性,而不是将值分配给$scope

   $scope.PlayFun = function (order) {
       $scope.indx = order;
   };

我们可以在HTML中访问$ scope的属性和方法。