0
0
ravi
answered Jun 24 '23 00:00
To change the src attribute of an <iframe> dynamically in AngularJS , you can utilize the power of two-way data binding provided by AngularJS. Here's an example of how you can achieve it:
HTML code:
<button ng-click="changeUrl('https://www.arrayoverflow.com')">Change URL</button>
<iframe ng-src="{{iframeSrc}}"></iframe>
In your AngularJS controller, define the changeUrl function and update the iframeSrc variable with the desired URL:
JavaScript code:
angular.module('myApp', [])
.controller('myController', function($scope) {
$scope.iframeSrc = ''; // Initial value for the src attribute
$scope.changeUrl = function(newUrl) {
$scope.iframeSrc = newUrl; // Update the iframeSrc variable with the new URL
};
});
Make sure to include the AngularJS library in your project and initialize your AngularJS app/module accordingly. The above code assumes you have a module named myApp and a controller named myController associated with it.
When the user clicks the "Change URL" button, it will trigger the changeUrl function, which updates the value of iframeSrc. As a result, the ng-src directive will be re-evaluated, and the src attribute of the <iframe> will be updated with the new URL.
Remember to replace 'https://www.arrayoverflow.com' with the desired URL you want to set for the <iframe>.
This approach leverages the two-way data binding capability of AngularJS to dynamically update the src attribute of the <iframe> based on user actions.