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"：["リンク"、 "リンク"、 "各]]

Answer 1

私はあなたの痛みを和らげるためにデータを抽出するだけで問題は表示されません。 uが行う

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リピートを経由して、それをレンダリングすることです

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