Asked 8 years ago
26 Sep 2016
Views 1514
ajamil

ajamil posted

how to change IFRAME url at angular js

want to change IFRAME src as user click on the differ button

HTML CODE:

<iframe ng-src="{{swing.url}}"></iframe>


so help
ravi

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.
Post Answer