AngularJS动态链接路由

Question

I have a list of apartments and the list prints out fine using ng-repeat. However each apartment that is printed should also be an actual "link" that a user can click and then be directed to a view of that apartment. My problem is the ng-repeat is repeating the different models of apartments but it is not repeating a new link for each apartment as I don't know the best way to attach a link dynamically. Does anyone have any ideas?

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

}]);

This is my view

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

How could I make each link print next to each apartment ? this part: "typesOfApartments" : ["Pullman", "Kitchenette", "Galley", "et."], "apartmentLink" : ["link", "link", "link", "etc. a link for each"]

Answer 1

I don't see a problem here you just need extract the data to ease your pain;

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

next thing u do is to render it via 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>