如何根據JSON對象的屬性動態地填充Angular JS中的顯示對象。

Question

我從一個module.js

.controller('home.person',['$scope','$filter','personResource',function($scope,$filter,personResource) { 

$scope.searchPerson = function() { 

var params = $scope.search || {}; 

params.skip=0; 
params.take =10; 

     $scope.personDetails = 
      { 
       "apiversion": "0.1", 
       "code": 200, 
       "status": "OK", 
       "mydata": { 

         "myrecords": [ 
          { 
           "models": [ 
            { 
             "name": "Selva", 
             "dob": "10/10/1981" 
            } 
           ], 
           "Address1": "ABC Street", 
           "Address2": "Apt 123", 
           "City": "NewCity1", 
           "State": "Georgia"      
          }, 

          { 
           "models": [ 
            { 
             "name": "Kumar", 
             "dob": "10/10/1982" 
            } 
           ], 
           "Address1": "BCD Street", 
           "Address2": "Apt 345", 
           "City": "NewCity2", 
           "State": "Ohio", 
           "Country":"USA" 

          }, 
          { 
           "models": [ 
            { 
             "name": "Pranav", 
             "dob": "10/10/1983" 
            } 
           ], 
           "Address1": "EFG Street", 
           "Address2": "Apt 678", 
           "City": "NewCity3", 
           "State": "NewYork", 
           "Country":"USA", 
           "Zipcode" :"123456" 
          } 
         ]     
       }  
      } 
} 

}]) 

現在我能夠靜態地建立UX閱讀下面的JSON值。但是我的每個記錄集的關鍵值對計數是不同的。所以我想根據當前記錄集的計數動態地構建我的html。國家& Zipcode並不存在於所有記錄中，所以我需要動態構建並填充html輸出。大多數情況下，我的json輸出是動態的。除了persondetails，我可能會獲得產品詳細信息的json輸出而不是PersonDetails。

<div ng-show="personDetails.mydata.myrecords.length > 0" ng-repeat="recordSingle in personDetails.mydata.myrecords"> 


       <div > 

         <span >Address1: {{recordSingle.Address1}}</span> 

          <span >Address2: {{recordSingle.Address2}}</span> 
         <span>City: {{recordSingle.City}}</span> 
         <span>State: {{recordSingle.State}}</span> 
         <span>Country: {{recordSingle.Country}}</span> 
          <span>Zipcode: {{recordSingle.Zipcode}}</span> 

         </div> 

       </div> 

Answer 1

[更新＃1：更新基於修改後的評論質疑]

[更新＃2：功能固定的拼寫錯誤，其中包括plunkr]

我現在明白了，要動態地構建顯示對象基於JSON對象的屬性。在這種情況下，我會遍歷該對象的屬性。我會使用一個函數爲每個對象生成這個屬性數組，以便可以過濾出任何原型鏈。我還會刪除任何不需要的特性，例如內部的$$hashKey以及可能的陣列對象，例如

在你的控制器：

$scope.getPropertyNames = getPropertyNames; 

function getPropertyNames(obj) { 
    var props = []; 
    for (var key in obj) { 
    if (obj.hasOwnProperty(key) && !angular.isArray(obj[key]) && key !== '$$hashKey') { 
     props.push(key); 
    } 
    } 

    return props; 
} 

然後在你的HTML視圖：

<div ng-repeat="record in personDetails.mydata.myrecords"> 
    <div ng-repeat="prop in getPropertyNames(record)"> 
    <span ng-bind="prop"></span>: <span ng-bind="record[prop]"></span> 
    </div> 
</div> 

這對我的作品......看到this plunker。它動態顯示數組中的對象的每個屬性（您可以在對象中擁有任何屬性）。這不是你想要達到的目標嗎？

Answer 2

的一種方法是使用ng-if語句中，可選的span元素：

<span ng-if="recordSingle.Address1">Address1: {{recordSingle.Address1}}</span>