在 AngularJS ng-repeat div 中使用 href [英] Use href in an AngularJS ng-repeat div
问题描述
我正在尝试在使用 ng-repeat 的 div 中插入一个 href 链接.这个 href 链接需要与每个用 ng-repeat 创建的 div 不同,它的值是 AngularJS $scope 变量的一部分.
这是我的JS代码:
var app = angular.module('test', []);app.controller('MainCtrl', function($scope) {var 数据库 = firebase.database();database.ref(`trips/${userid}/trips`).once('value')//将返回 `tripId` 中的所有照片对象.then(照片快照 => {var 行程 = [];photosSnap.forEach((trip) => {行程.push({tripKey:trip.key,旅行名称:trip.val().name,tripPhotoUrl: trip.val().photourl,tripBeginDate: ConvertDate(trip.val().begindate),tripEndDate: ConvertDate(trip.val().enddate)});});$scope.repeatData = 行程;//数组放入angular controller的作用域中,后面和ng-repeat一起使用//$scope.data = repeatData;//$scope.value = repeatData;//立即应用,否则看不到变化$scope.$apply();//返回控制台中的数组以检查值console.log($scope);}).catch(err => alert(err));});
HTML 代码的一次尝试:
<div id="usertripinfo" ng-repeat="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}}
这段代码只是不允许我点击任何地方,我的光标只是变成了一个指针而已.
再次尝试 HTML 代码:
<a ng-repeat="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}}</a>
有了这个代码,我可以点击,但它把我带到file:///Users/Marc/firebase/trip.html,所以它缺少参数userid和tripid(userid是AngularJS之外的变量,而tripid是AngularJS 下的 data.tripKey $scope.repeatData)
对我来说,您似乎把这个问题复杂化了.没有理由使用我可以看到的 onclick.我会把它改成这样的:
<a ng-repeat="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}}</a>
我也不认为您需要第二次 ng-repeat,除非您真的想复制每个锚点内的所有图像.
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)
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.
这篇关于在 AngularJS ng-repeat div 中使用 href的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!