嵌套json值的角度js ng-repeat

我想用HTML數據和預期輸出格式使用角度js在HTML中打印表格。你們能幫我解決問題嗎？嵌套json值的角度js ng-repeat

下面是輸出，我需要

<table ng-app="testApp" ng-controller="testController"> 
<tr ng-repeat-start="test in testData"> 
    <td rowspan="{{ test.data.length }}">{{ test.timeline }}</td> 

    <td>{{ test.data[0] }}</td> 
</tr> 


<tr ng-repeat-end ng-repeat="value in test.data.slice(1)"> 
     <td>{{ value }}</td> 
    </tr>

angular.module('testApp',[]) 
.controller('testController',function($scope){ 
    $scope.testData=[{ 
    "timeline": "2017 - 05 - 23 T10: 09: 06.896 Z ", 
    data: [{ 
     "story ": "Update ", 
     "component ": "Component 1" 
    }, { 
     "story ": "Update 2 ", 
     "component ": "Component 2" 
    }] 


}, { 
    "timeline": "2017 - 05 - 23 T10: 09: 06.896 Z ", 
    data: [{ 
     "story ": "Update", 
     "component ": "Component 3 " 
    }, { 
     "story ": "Update 2 ", 
     "component ": "Component 2" 
    }] 
}]; 
});

來源

2017-06-14 Shankar

在你的HTML試試這個

<table ng-app="testApp" ng-controller="testController"> 
<tr ng-repeat="test in testData"> 
    <td rowspan="{{ test.data.length }}">{{ test.timeline }}</td> 

    <td ng-repeat="value in test.data"> 
    {{ value.story }}</td> 
     <td ng-repeat="value in test.data"> 
    {{ value.component }}</td> 
</tr> 
    </table>

來源

2017-06-14 09:39:25 abdoutelb

沒有它不工作 – Shankar

@Shankar我忘了現在加入'.data'檢查 – abdoutelb

你可以使用這一項，根據您的要求格式化表格。你寫的對象錯誤只是糾正你的對象

<!DOCTYPE html> 
<html> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> 

<body ng-app="myApp" ng-controller="myCtrl"> 
<table> 
<tr ng-repeat="x in records"> 

<td> 
{{x.timeline}} 
</td> 

<td> 

<table> 
<tr ng-repeat="y in x.data"> 

<td>{{y.story}}</td> 
<td>{{y.component}}</td> 

</tr> 

</table> 

</td> 

</tr> 

</table> 

<script> 
var app = angular.module("myApp", []); 
app.controller("myCtrl", function($scope) { 
    $scope.records = [{ 
    "timeline": "2017 - 05 - 23 T10: 09: 06.896 Z ", 
    "data": [{ 
     "story": "Update ", 
     "component": "Component 1" 
    }, { 
     "story": "Update 2 ", 
     "component": "Component 2" 
    }] 


}, { 
    "timeline": "2017 - 05 - 23 T10: 09: 06.896 Z ", 
    "data": [{ 
     "story": "Update", 
     "component": "Component 3 " 
    }, { 
     "story": "Update 2 ", 
     "component": "Component 2" 
    }] 
}]; 
}); 
</script> 

</body> 
</html>

下面是該代碼

來源

2017-06-14 09:44:18

x.data未能正常工作。我的意思是{{y.story}} {{y.component}}返回空白。 – Shankar

你使用了我寫在我的例子中的數據@Shankar –

@Shankar我已經添加了我寫的代碼的輸出 –

的輸出試試這個

 <table> 
     <tr ng-repeat="test in testData"> 
       <td>{{ test.timeline }}</td> 
       <td> 
       <div ng-repeat="value in test.data"> 
        {{value.story}} 
       </div> 
      </td> 
     </tr> 
     </table>

檢查結果plunker https://plnkr.co/edit/gx3IaFtUSJiLRS5jutqp?p=preview

來源

2017-06-14 10:08:52 himanshu

angular.module('testApp',[]) 
 
.controller('testController',function($scope){ 
 
    $scope.testData=[{ 
 
     "timeline": "2017 - 05 - 23 T10: 09: 06.896 Z", 
 
     data: [{ 
 
      "story": "Update", 
 
      "component": "Component 1" 
 
      }, { 
 
      "story": "Update 2 ", 
 
      "component": "Component 2" 
 
      }] 
 
     }, { 
 
     "timeline": "2017 - 05 - 23 T10: 09: 06.896 Z", 
 
     data: [{ 
 
      "story": "Update", 
 
      "component": "Component 3" 
 
     },{ 
 
      "story": "Update 2 ", 
 
      "component": "Component 2" 
 
     }] 
 
    }]; 
 
});

table, th, td { 
 
    border: 1px solid black; 
 
} 
 
.no-border table { 
 
    border: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script> 
 
<div ng-app="testApp" ng-controller="testController"> 
 
<table> 
 
<tr> 
 
    <td>TimeLine</td> 
 
    <td>Story</td> 
 
    <td>Component</td> 
 
</tr> 
 
<tr ng-repeat="test in testData"> 
 
    <td>{{ test.timeline }}</td> 
 
    <td class="no-border"> 
 
    <table> 
 
    <tr ng-repeat="item in test.data"> 
 
     <td>{{ item.story }}</td> 
 
    </tr> 
 
    </table> 
 
    </td> 
 
    <td class="no-border"> 
 
    <table> 
 
    <tr ng-repeat="item in test.data"> 
 
     <td>{{ item.component }}</td> 
 
    </tr> 
 
    </table> 
 
    </td> 
 
    
 
</tr> 
 
</table> 
 
</div>

來源

2017-06-14 10:16:41

var myApp = angular.module('myApp', []); 
 
myApp.controller('MyCtrl', function($scope) { 
 
    $scope.testData = [{ 
 
    timeline: "2017 - 05 - 23 T10: 09: 06.896 Z ", 
 
    data: [{ 
 
     story: "story1 ", 
 
     component: "Component 1" 
 
    }, { 
 
     story: "story2 ", 
 
     component: "Component 2" 
 
    }] 
 
    }, { 
 
    timeline: "2017 - 05 - 23 T10: 09: 06.896 Z ", 
 
    data: [{ 
 
     story: "story1", 
 
     component: "Component 3 " 
 
    }, { 
 
     story: "story2 ", 
 
     component: "Component 2" 
 
    }] 
 
    }]; 
 
});

table, th, td { 
 
    border: 1px solid black; 
 
    padding:1px 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="myApp" ng-controller="MyCtrl"> 
 
    <table class="myTable"> 
 
    <tr> 
 
     <th><b>TimeLine</b></th> 
 
     <th><b>Story</b></th> 
 
     <th><b>Component</b></th> 
 
    </tr> 
 
    <tr ng-repeat="test in testData"> 
 
     <td>{{ test.timeline }}</td> 
 
     <td> 
 
     <table> 
 
      <tr ng-repeat="value in test.data"> 
 
      <td> {{ value.story }}</td> 
 
      </tr> 
 
     </table> 
 
     </td> 
 
     <td> 
 
     <table> 
 
      <tr ng-repeat="value in test.data"> 
 
      <td>{{ value.component }}</td> 
 
      </tr> 
 
     </table> 
 
     </td> 
 
    </tr> 
 
    </table> 
 
</div>

來源

2017-06-14 10:24:19 anoop

對於預期輸出你需要寫HTML一樣

angular.module('testApp', []) 
 
    .controller('testController', function($scope) { 
 
    $scope.testData = [{ 
 
     "timeline": "2017 - 04 - 23 T10: 09: 06.896 Z ", 
 
     "data": [{ 
 
      "story": "Update 1", 
 
      "component": "Component 1" 
 
     }, 
 
     { 
 
      "story": "Update 2 ", 
 
      "component": "Component 2" 
 
     } 
 
     ] 
 
    }, { 
 
     "timeline": "2017 - 05 - 23 T10: 09: 06.896 Z ", 
 
     "data": [{ 
 
      "story": "Update 3", 
 
      "component": "Component 3 " 
 
     }, 
 
     { 
 
      "story": "Update 4 ", 
 
      "component": "Component 2" 
 
     } 
 
     ] 
 
    }]; 
 
    });

td, 
 
th { 
 
    border: 1px solid #000; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table ng-app="testApp" ng-controller="testController" style="border:1px solid black"> 
 
    <thead> 
 
    <tr> 
 
     <th>Timeline</th> 
 
     <th>Story</th> 
 
     <th>Component</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody ng-repeat="test in testData"> 
 
    <tr ng-repeat="data in test.data"> 
 
     <td rowspan="{{test.data.length}}" ng-hide="$index>0"> 
 
     {{test.timeline}} 
 
     </td> 
 
     <td>{{data.story}}</td> 
 
     <td>{{data.component}}</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

來源

2017-06-14 10:44:21

嵌套json值的角度js ng-repeat

回答

相關問題