我有一份公寓列表，使用ng-repeat打印出精美的列表。但是，每个打印的公寓也应该是一个真实的链接＆＃34;用户可以单击然后将其定向到该公寓的视图。我的问题是ng-repeat正在重复不同的公寓模型，但它并没有重复每个公寓的新链接，因为我不知道动态附加链接的最佳方式。有没有人有任何想法？
app.controller("apartmentSizeController", ['$scope', '$stateParams', function($scope, $stateParams){
$scope.id = $stateParams.id;
let apartments = [];
$scope.apartments = apartments;
$scope.apartmentTemplate = [{
"id": 1,
"apartmentName": "Park Dearborn",
"apartmentDescription": "",
"amenityLink": "amenities({id:1})",
"neighborhoodLink": "neighborhood({id:1})",
"apartmentImage": "",
"apartments" : [{
"name" : "Studio",
"amenityDescription" : "make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,",
"apartmentTypeImage" : "",
"typesOfApartments" : ["Pullman", "Kitchenette", "Galley", "Southbookcase", "Northbookcase"],
"apartmentLink" : ["link", "link", "link", "etc. a link for each"]
},
{
"name" : "One Bedroom",
"amenityDescription" : "make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,",
"apartmentTypeImage" : "",
"typesOfApartments" : ["Northeast", "North", "Northwest", "Southwest", "Northbookcase"],
"apartmentLink" : ["link", "link"]
}]
},
{
"id": 2,
"apartmentName": "Dearborn North",
"apartmentDescription": "Amazingly beautiful apartments please put more stuff here",
"amenityLink": "amenities({id:2})",
"neighborhoodLink": "neighborhood({id:2})",
"apartmentImage": "",
"apartments" : [{
"name" : "Convertible",
"amenityDescription" : "make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,",
"apartmentTypeImage" : "",
"typesOfApartments" : ["Style1", "Style2"],
"apartmentLink" : ["link"]
},
{
"name" : "Studio",
"amenityDescription" : "make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,",
"apartmentTypeImage" : "",
"typesOfApartments" : ["Style1", "Style2"],
"apartmentLink" : ["link", "link", "link"]
},
{
"name" : "One Bedroom",
"amenityDescription" : "make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,",
"apartmentTypeImage" : "",
"typesOfApartments" : ["Style1", "Style2"],
"apartmentLink" : ["link"]
}]
}];
var x = $scope.apartmentTemplate.indexOf($scope.apartmentTemplate[$scope.id]);
for (let i = 0; i < $scope.apartmentTemplate.length; i++) {
if ($scope.apartmentTemplate[i].id == $scope.id) {
console.log("found index " + $scope.apartmentTemplate[i].id);
$scope.buildingImage = $scope.apartmentTemplate[i].apartmentImage;
$scope.apartmentDescription = $scope.apartmentTemplate[i].apartmentDescription;
$scope.amenityLink = $scope.apartmentTemplate[i].amenityLink;
$scope.neighborhoodLink = $scope.apartmentTemplate[i].neighborhoodLink;
$scope.apartmentLink = $scope.apartmentTemplate[i].apartments[i].apartmentLink[i];
$scope.apartments = $scope.apartmentTemplate[i].apartments;
} else {
console.log("not found");
}
};
}]);
这是我的观点
<div ng-controller="apartmentSizeController" class="apartment-details-container" style="border: 2px solid rgb(101,0,0);">
<div class="apartment-details" style="background-color: white;">
<div class="amenity-title" style="color: rgb(101,0,0); background-color: white; width: 350px; margin: 1em;">
<p><span style="font-size: 28px; color: rgb(101,0,0); font-family: crimson text, sans-serif;letter-spacing: 1.2;">APARTMENTS</span></p>
<p style="font-family: sans-serif;">{{apartmentDescription}}<!---->
</p>
<h1>ID is {{id}}</h1>
<a ui-sref={{amenityLink}}><h3 style="color: rgb(101,0,0);; font-family: sans-serif;">view amenities</h3></a>
<a ui-sref={{neighborhoodLink}}><h3 style="color: rgb(101,0,0);; font-family: sans-serif;">view neighborhood</h3></a>
<p ng-click="goBack()"><a href="#" style="color: rgb(101,0,0);font-family: Crimson-text, sans-serif;">back</a></p>
</div>
<div><img style="width: 100%;" height="416"; src={{buildingImage}} /></div>
</div>
</div><!-- end of apartment details container-->
<div class="property-grid">
<div ng-controller="apartmentSizeController" class="property-grid-item" ng-repeat="apartment in apartments">
<div class="frame-two"><img src={{apartment.apartmentTypeImage}} alt="park dearborn"></div>
<div class="apartment-info"><p><span class="font-title">{{apartment.name}}
<aside>
<a href="??">
<h4 ng-repeat="type in apartment.typesOfApartments"> {{type}}</h4>
</a>
</aside>
</div><!--end apartment info-->
</div><!--property-grid-item-->
</div>
</div>
</div><!--end main -content-->
我怎样才能在每间公寓旁边打印每个链接？这部分： ＆＃34; typesOfApartments＆＃34; ：[＆＃34; Pullman＆＃34;，＆＃34; Kitchenette＆＃34;，＆＃34; Galley＆＃34;，＆＃34; et。＆＃34;]， ＆＃34; apartmentLink＆＃34; ：[＆＃34; link＆＃34;，＆＃34; link＆＃34;，＆＃34; link＆＃34;，＆＃34;等。每个＆＃34;]
的链接答案 0 :(得分：0)
我在这里看不到问题，你只需要提取数据以减轻痛苦;
<PlaySquare value={this.props.playSquares[i]} onClick={() => this.props.onClick(i)}
接下来你要做的是通过ng-repeat
渲染它let results = [];
let details = $scope.apartmentTemplate.find(x => x.id === $scope.id);
for ( let j = 0 ; details !== undefined && j < details.apartments.length ; j++){
//format the links
//assuming the link + type has the same number of items
let types=[];
for ( let i = 0 ; i < details.apartments[j].typesOfApartments.length ; i++ ){
types.push({
name: details.apartments[j].typesOfApartments[i],
link: details.apartments[j].link[i]
});
}
results.push({
name: details.apartments[j].name,
image: details.apartments[j].apartmentTypeImage,
types: types
});
}