AngularJS動態鏈接路由

Question

我有一個公寓列表，該列表可以使用ng-repeat打印出來。 但是，每個打印的公寓還應該是用戶可以單擊然后指向該公寓視圖的實際“鏈接”。 我的問題是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-->

如何使每個鏈接都打印在每個公寓旁邊？ 這部分：“ typesOfApartments”：[“ Pullman”，“ Kitchenette”，“ Galley”，“ et。”]，“ apartmentLink”：[“ link”，“ link”，“ link”，“ etc。 “]

Answer 1

我認為這里沒有問題，您只需要提取數據即可減輕痛苦；

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

您要做的下一件事是通過ng-repeat渲染它

<div ng-controller="apartmentSizeController" class="property-grid-item" 
     ng-repeat="apartment in results">
    <div class="frame-two">
     <img src={{apartment.image}} alt="park dearborn"></div>
     <div class="apartment-info">
       <p>
         <span class="font-title">"{{apartment.name}}</span>
         <aside>
           <a href="{{type.link}}" ng-repeat="type in apartment.types" >
             <h4>{{type.name}}</h4>
           </a>   
         </aside>
     </div>
  </div>
</div>