angularjs ng-repeat with dynamic json/object

Question

ng-repeatを使用して、動的データ構造（異なるプロパティ名とプロパティ長のように一貫性がない）のソリューションを探しています。サンプルコードは以下の通りです。

$scope.data = [{ 
     "table":[{ 
     "employee":"name1", 
     "value1":"10", 
     "value2":"20" 
     }, 
     { 
     "employee":"name2", 
     "value1":"15", 
     "value2":"30" 
     }] 
    }, 
    { 
     "table":[{ 
     "company":"name1", 
     "compnayValue":"12" 
     }, 
     { 
     "company":"name2", 
     "compnayValue":"12" 
     }] 
    }] 

    <ul> 
     <li ng-repeat="item in data"> 
      <table> 
       <tr ng-repeat="row in item.table"> 
        <td>{{??}}</td> 
        <td>{{??}}</td> 
       </tr> 
      </table> 
     </li> 
    </ul> 

Answer 1

あなたはすべてのプロパティと表示を列挙できそれらの値は別のものでng-repeattd：

<li ng-repeat="item in data"> 
    <table> 
    <tr ng-repeat="row in item.table"> 
     <td ng-repeat="(key, value) in row"> 
     {{row[key]}} 
     </td> 
    </tr> 
    </table> 
</li> 

しかし、一部の行にはさらにtdがあるため、表形式のデータが破損します。あなたが最初にすべての行のすべてのキーのセットを見つけることができることを防止するためには、それらの最初でthの繰り返しを行い、その後、下記の対応td、上に表示例：

<th ng-repeat="propertyName in allPossiblePropertyNames"> 
    {{propertyName}} 
</th> 

と

<td ng-repeat="propertyName in allPossiblePropertyNames"> 
    {{row[propertyName ]}} 
</td> 

Answer 2

使用<tbody>のようにそれのプロパティを反復するためにtableアレイとiterating over object properties項で述べた(key,value)構文内のオブジェクトを表すために：

angular.module('test', []).controller('testCtrl', function($scope) { 
 
    $scope.data = [{ 
 
    "table": [{ 
 
     "employee": "name1", 
 
     "value1": "10", 
 
     "value2": "20" 
 
    }, { 
 
     "employee": "name2", 
 
     "value1": "15", 
 
     "value2": "30" 
 
    }] 
 
    }, { 
 
    "table": [{ 
 
     "company": "name1", 
 
     "compnayValue": "12" 
 
    }, { 
 
     "company": "name2", 
 
     "compnayValue": "12" 
 
    }] 
 
    }] 
 
});

ul { 
 
    padding: 0; 
 
} 
 
ul li { 
 
    list-style-type: none; 
 
    margin-bottom: 10px; 
 
} 
 
table { 
 
    width: 100%; 
 
    table-layout: fixed; 
 
    background: #ebebeb; 
 
} 
 
tbody:nth-child(odd) tr { 
 
    color: #fff; 
 
    background: dodgerblue; 
 
} 
 
tbody:nth-child(even) tr { 
 
    color: #fff; 
 
    background: hotpink; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="test" ng-controller="testCtrl"> 
 
    <ul> 
 
    <li ng-repeat="item in data"> 
 
     <table> 
 
     <tbody ng-repeat="row in item.table"> 
 
      <tr ng-repeat="(key, value) in row"> 
 
      <td> 
 
       {{key}} 
 
      </td> 
 
      <td> 
 
       {{value}} 
 
      </td> 
 
      </tr> 
 
     </tbody> 
 
     </table> 
 
    </li> 
 
    </ul> 
 
</div>

Answer 3

チェックこのplunkerは、テンプレートがあなたのデータに依存定義することができます。 https://plnkr.co/edit/fVGhKZy5gnBzuPwspy5s?p=preview

使用角度フィルタ：

を

app.controller('MainCtrl', function($scope) { 
$scope.name = 'World'; 
$scope.data = [{ 
     "table":[{ 
     "employee":"name1", 
     "value1":"10", 
     "value2":"20" 
     }, 
     { 
     "employee":"name2", 
     "value1":"15", 
     "value2":"30" 
     }] 
    }, 
    { 
     "table":[{ 
     "company":"name1", 
     "compnayValue":"12" 
     }, 
    { 
    "company":"name2", 
    "compnayValue":"12" 
    }] 
    }] 
}) 
    .filter('isCompnay', function() { 
    return function(input) { 
    console.log(input.employee === undefined) 
    return input.company ? input : undefined; 
    }; 
}) 
.filter('isEmployee', function() { 
return function(input) { 
    console.log(input.employee === undefined) 
    return input.employee ? input : undefined; 
    }; 
});