在 AngularJS ng-repeat div 中使用 href

Question

我正在尝试在使用 ng-repeat 的 div 中插入一个 href link。这个 href link 需要不同于使用 ng-repeat 创建的每个 div，它的值是 AngularJS $scope 变量的一部分。

这是我的 JS 代码：

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));

     });

尝试 HTML 代码：

<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>

这段代码不允许我点击任何地方，我的光标只是变成了一个指针，仅此而已。

第二次尝试 HTML 代码：

<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>

有了这段代码，我可以点击，但它把我带到了file:///Users/Marc/firebase/trip.html，所以它缺少参数userid和tripid（userid是[=之外的变量） 33=]，三联体是 AngularJS $scope.repeatData)

下的 data.tripKey

Answer 1

看来你把这个问题复杂化了。没有理由使用我能看到的onclick。我会将其更改为：

<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>

我也不认为你需要第二次 ng-repeat 除非你真的想复制每个锚点内的所有图像。

在 AngularJS ng-repeat div 中使用 href

Use href in an AngularJS ng-repeat div

javascript

angularjs

firebase

angularjs-ng-repeat

firebase-realtime-database