Question

如何遍历我的Post键以防止我的表头被硬编码？现在我的标题行只是空白。

 $scope.posts.data = [
{
 "Post": {
   "id": "38",
   "title": "asdfasdf",
   "body": "asdfsadf",
   "created": "2014-08-01 17:37:27",
   "modified": "2014-08-01 17:37:27",
   "domain_id": "5286a27b-ebdd-491a-8e8d-46e64056922c"
 }
}]



<table class="table table-striped">
    <thead>
        <tr>
            <th ng-repeat="(key, value) in posts.data">{{key}}</th>

        </tr>
    </thead>

    <tbody>
        <tr ng-repeat="(key, value) in posts.data">
            <td> {{key}} </td> <td> {{ value.Post.title}} </td>
        </tr>
    </tbody>

Answer 1

这是一个工作样本，希望它能帮到你

http://plnkr.co/edit/jBc3DJnzXNJUiVVwRAPw?p=preview

<table class="table table-striped">
<thead>
    <tr>
        <th ng-repeat="(key, value) in posts.data[0].Post">{{key}}</th>

    </tr>
</thead>

<tbody>
    <tr ng-repeat="value in posts.data track by $index">
        <td ng-repeat="(key, value) in posts.data[$index].Post"> {{value}} </td>
    </tr>
</tbody>

Answer 2

我创建了一个简单的指令，它只给我一个提供数据的简单表

csapp.directive('csTable', function () {

    var templateFunction = function () {
        var html = '<table class="table table-bordered" data-ng-show="data.length > 0" style="overflow: auto; width: 100%">';
        html += '<thead>';
        html += '   <tr>';
        html += '       <th ng-repeat="(key, value) in data[0]">{{key}}</th>';
        html += '   </tr>';
        html += '</thead>';
        html += '<tbody>';
        html += '   <tr data-ng-repeat="row in data">';
        html += '       <td style="white-space: nowrap" data-ng-repeat="(key, value) in row">{{value}}</td>';
        html += '   </tr>';
        html += '</tbody>';
        html += '</table>';
        return html;
    };

    return {
        restrict: 'E',
        template: templateFunction,
        scope: { data: '=' }
    };
});

你提到的问题在这里解决了

      <th ng-repeat="(key, value) in data[0]">{{key}}</th>';

所以从数据中获取第一行并在单行上重复。在你的情况下会像

      <th ng-repeat="(key, value) in posts.data[0]">{{key}}</th>

希望这会有所帮助

如何在angularjs中保持动态

2 个答案: