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

你可以列舉所有的屬性和顯示器它們的值由td上的另一個ng-repeat：

<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 s。爲了防止這種情況，你可以先找出一組中的所有行的所有按鍵，做一個th重複與第一，然後在下面的相應td，顯示它們如：

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

和

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

Answer 2

使用<tbody>代表內部table陣列和(key,value)語法iterating over object properties節中提到的一個對象來遍歷它就像屬性：

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