CODEWITHSUNDEEP
htmlangularjs
HomerO
HomerO

Reputation: 33

Show url in a div after click the href on angular

I was searching on Google, but i can't find the answer. I want to show the url in a div after the url has been clicked using $http (dynamic links).

For example:

<ul>
    <li ng-repeat="file in files | filter:search as results" ><a ng-href="{{getSrc(file._name)}}" target="_blank">{{file._name}}</a></li> 
    <div>
            **SHOW URL OF CLICKED LINK HERE**
    </div>
  </ul>

   $scope.read = function(){
    var request = $http({
        method : 'GET',
        url : 'request.php', 
    });
    request.then(function(response){
        $scope.files = response.data;
    }, function(error){ 
        alert(error.data);
    });
}

$scope.getSrc = function(src) { 
    return 'files/' + src;
};

Tried everything but i cannot make it work. Any help would be appreciated!!!

Upvotes: 1

Views: 1214

Answers (2)

user441521
user441521

Reputation: 6998

I think you could put an ng-click on the link to a function you define on the scope and pass in the link address to it. Then set that to a scope variable and inside your div show that scope variable. At first it won't show because you'll init it to null, but once you click the link it'll call the ng-click function passing in the link name and you set the variable and now it'll show.

<ul>
    <li ng-repeat="file in files | filter:search as results" ><a ng-href="{{getSrc(file._name)}}" target="_blank" ng-click="linkClicked(file._name)">{{file._name}}</a></li> 
    <div>
            {{clickedLink}}

    </div>
  </ul>

$scope.clickedLink = null;

$scope.linkClicked  = function(link){
   $scope.clickedLink = link;
}

Upvotes: 2

K K
K K

Reputation: 18109

Try modifying:

$scope.result;
$scope.getSrc = function(src) {
  $scope.result = 'files/' + src;
  return $scope.result;
};

and then the html:

<div>
  {{result}}
</div>

Upvotes: 1

Related Questions