Use href in an AngularJS ng-repeat div

Question

I'm trying to insert a href link inside a div that uses ng-repeat. This href link needs to be different from each div created with ng-repeat, its value being part of AngularJS $scope variable.

Here is my JS code:

var app = angular.module('test', []);

app.controller('MainCtrl', function($scope) {
    var database = firebase.database();
    database.ref(`trips/${userid}/trips`).once('value') 


    // will return you all the photo objects inside the `tripId`

.then(photosSnap => {


var trips = [];
photosSnap.forEach((trip) => {
trips.push({
tripKey: trip.key,
tripName: trip.val().name,
tripPhotoUrl: trip.val().photourl,
tripBeginDate: ConvertDate(trip.val().begindate),
tripEndDate: ConvertDate(trip.val().enddate)
});
});
 $scope.repeatData = trips;

// the array is placed into the scope of angular controller, later used with ng-repeat

   // $scope.data = repeatData;
   // $scope.value = repeatData;

// apply immediatly, otherwise doesn't see the changes

    $scope.$apply();

// returns the array in the console to check values

    console.log($scope);
}).catch(err => alert(err));

     });

One try of HTML code:

<div class="main" ng-app="test" ng-controller="MainCtrl">

<div id="usertripinfo" ng-repeat="data in repeatData" style="background-image: url({{data.tripPhotoUrl}}); height: 300px; width: 600px; cursor: pointer;" href="trip.html" onclick="location.href=this.href+'?userid='+userid+'&tripid='+data.tripKey;return false;">

{{data.tripName}}
{{data.tripKey}}
{{data.tripBeginDate}}
{{data.tripEndDate}}

    </div>

</div>

This code just doesn't let me click anywhere, my cursor just becomes a pointer and that's it.

A second try of HTML code:

<div class="main" ng-app="test" ng-controller="MainCtrl">

<a ng-repeat="data in repeatData" href="trip.html" onclick="location.href=this.href+'?userid='+userid+'&tripid='+data.tripKey;return false;">
    <div id="usertripinfo" ng-repeat="data in repeatData" style="background-image: url({{data.tripPhotoUrl}}); height: 300px; width: 600px; cursor: pointer;">

{{data.tripName}}
{{data.tripKey}}
{{data.tripBeginDate}}
{{data.tripEndDate}}

    </div>
    </a>

</div>

With this code, I can click, but it brings me to file:///Users/Marc/firebase/trip.html, so it's lacking the parameters userid and tripid (userid being a variable outside AngularJS, and tripid being data.tripKey under AngularJS $scope.repeatData)

You need links to external pages or to other views in your AngularJs app ? — JeanJacques
– JeanJacques, Commented Jul 25, 2017 at 14:08
Are you serving your site over the file:// protocol, as in the address bar has file:// at the beginning of your address? — zero298
– zero298, Commented Jul 25, 2017 at 14:47

Mike Feltman · Accepted Answer · 2017-07-25 14:44:26Z

1

It looks like you're overcomplicating this to me. There's no reason for using onclick that I can see. I'd change it to something like:

<div class="main" ng-app="test" ng-controller="MainCtrl">

<a ng-repeat="data in repeatData" href="trip.html?userid={{userid}}&tripid={{data.tripKey}}">
    <div id="usertripinfo" style="background-image: url({{data.tripPhotoUrl}}); height: 300px; width: 600px; cursor: pointer;">

{{data.tripName}}
{{data.tripKey}}
{{data.tripBeginDate}}
{{data.tripEndDate}}
    </div>
    </a>
</div>

I also don't think you need the 2nd ng-repeat unless you really want to duplicate all of the images inside of each anchor.

edited Jul 25, 2017 at 14:44

answered Jul 25, 2017 at 14:22

Mike Feltman

5,1721 gold badge19 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

marcvander Over a year ago

I used your code, and now I can click on each div, though it brings me to this link: "file:///Users/Marc/firebase/trip.html?userid=&tripid=" Seems like the parameters in the URL cannot be written

Mike Feltman Over a year ago

I didn't capitalize the K in tripKey. That's probably the issue there. The controller cannot evaluate userId. I would suggest adding $scope.userid = userid to your controller code in the constructor so make sure it's available there. For clarity, I'm going to edit tripKey in the answer.

marcvander Over a year ago

I added $scope.userid = userid to my controller and it worked, thanks!

marcvander Over a year ago

One more question, I'm trying to add another controller in my single page app. It seems like my second controller is not taken into account. Here is a jsfiddle with my code: jsfiddle.net/5jv44y0t/1

Mike Feltman Over a year ago

It looks OK. You probably should open up a new question for this. Make sure you state what symptoms make it seem like the 2nd controller isn't available. Also, I hope your javascript is really in external files. :)

|

Collectives™ on Stack Overflow

Use href in an AngularJS ng-repeat div

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related