Is there a way to display an iframe element inside an li element on ng-click, but only for the specific one that was clicked? Additionally, how can all iframes be hidden using AngularJs?
<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;
// This function is necessary for executing multiple tasks.
};
});
</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>
In simpler terms:
I want the PlayFun function to execute when a list item (li) is clicked, and based on the $index, I want the corresponding iframe to be displayed.