如何根据 JSON 对象的属性在 Angular JS 中动态填充显示对象。？

Question

我正在从 module.js 中读取以下 json 值

.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"
                           }
                        ]                  
                }    
            }
}

}])

现在我可以静态构建用户体验了。但是我每个记录集的键值对计数是不同的。所以我想根据当前记录集的计数动态构建我的 html。所有记录中都不存在国家和邮政编码，所以我需要动态构建构建并填充 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

一种方法是使用ng-if 语句，用于可选的span 元素：

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

Answer 2

[更新 #1：根据修改后的 cmets 进行更新]

[更新 #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。它动态显示数组中对象的每个属性（您可以在对象中有任何属性）。这不是你想要达到的目标吗？