使用ng-repeat在角度js中填充表格

我可以逐行填充内容。但是，我想知道我们如何填写一个有两列的表格。我希望它能够在不重复内容的情况下以列方式填充。基本上，它应该返回一个有两行两列的表格。使用ng-repeat在角度js中填充表格

<!DOCTYPE html> 
<html> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
 
<body ng-app="myApp" ng-controller="myCtrl"> 
 
<h1 ng-repeat="x in records"> 
 
<table align=center> 
    <tr> 
     <td>{{x}}</td> 
     <td>{{x}}</td> 
    </tr> 
</table> 
</h1> 
 
<script> 
var app = angular.module("myApp", []); 
app.controller("myCtrl", function($scope) { 
    $scope.records = [ 
    "Alfreds Futterkiste", 
    "Berglunds snabbköp", 
    "Centro comercial Moctezuma", 
    "Ernst Handel", 
    ] 
}); 
</script> 
 
</body> 
</html>

来源

2017-02-27 Raj

我不太确定你想要什么来完成，这时你的代码，你都在重复着表元件。所以你要创建5个表格，每个表格有一个行和两个列。你可以用列式部分更清楚一点吗？ – samson

您需要重新排列阵列中的数据以映射到表格，以便可以使用ng-repeat。 – Hacker

在AngularJS数据大多在JSON被操纵并收集阵列。

从API或服务调用中获取数据并将数据转换为适当的对象数组，然后可以将数据轻松地分配给表列，并将记录值分配给表中的每一行使用“ng-重复“在AngularJS中。

在下面的代码中，您可以看到“ng-repeat”和“记录中的x”用作迭代数据值记录并分配给表的循环。

<!DOCTYPE html> 
<html> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
 
<body ng-app="myApp" ng-controller="myCtrl"> 
 
<h1 ng-repeat="x in records"> 
 
<table align=center> 
    <tr> 
     <td>{{x.name}}</td> 
    </tr> 
    <tr> 
     <td>{{x.location}}</td> 
    </tr> 

</table> 
</h1> 
 
<script> 
var app = angular.module("myApp", []); 
app.controller("myCtrl", function($scope) { 
    $scope.records = [ 
    {"name":"Alfreds Futterkiste", "location":"avenue1"}, 
    {"Berglunds snabbköp", "location":"avenue2"}, 
    {"name":"Centro comercial Moctezuma", "location":"avenue3"}, 
    {"name":"Ernst Handel", "location":"avenue4"}, 
    ] 
</script> 
 
</body> 
</html>

来源

2017-02-27 00:21:36

我知道如何提取json的细节。我想要如描述中所示的那样并排放置两个json对象。虽然我很欣赏你的努力。 – Raj

您的$范围没有采取，更改您的$范围像js数组的对象。并在正确的地方给予重复。像下面那样更改您的代码。

<html> 
 
<head> 
 
<script src="https://opensource.keycdn.com/angularjs/1.6.2/angular.min.js "></script> 
 
<script> 
 
var app = angular.module('app',[]); 
 
app.controller('ctrl',['$scope', function($scope){ 
 
$scope.records = [{name:"Alfreds Futterkiste", location:"avenue1"},{name:"Berglunds snabbköp", location:"avenue2"},{name:"Centro comercial Moctezuma", location:"avenue3"},{name:"Ernst Handel", location:"avenue4"}]; 
 
$scope.records1 = [{name:"Centro comercial Moctezuma", location:"avenue1"},{name:"Ernst Handel", location:"avenue2"},{name:"Berglunds snabbköp", location:"avenue3"},{name:"Alfreds Futterkiste", location:"avenue4"}]; 
 
}]); 
 
</script> 
 
</head> 
 
<body ng-app="app"> 
 
<div ng-controller="ctrl"> 
 
<table align=center> 
 

 
      <tr> 
 
       <th>Object one</th> 
 
       <th>Object two</th>    
 
      </tr> 
 
     
 
    <tr ng-repeat="x1 in records">  
 
     <td>{{x1.name}}</td>  
 
     <td>{{records1[$index].name}}</td> 
 
    </tr> 
 
    
 
       
 
</table> 
 
<br> 
 

 
Your code result:- 
 

 
<h3 ng-repeat="x in records"> 
 
<table align=center> 
 
<tr> 
 
       <th>Country</th> 
 
       <th>Languages</th>    
 
      </tr> 
 
    <tr> 
 
     <td>{{x.name}}</td> 
 
     <td>{{x.location}}</td> 
 
    </tr> 
 
</table> 
 
</h3> 
 
</div> 
 
</body> 
 
</html>

$scope.records = [ 
    {name:"Alfreds Futterkiste", location:"avenue1"}, 
    {name:"Berglunds snabbköp", location:"avenue2"}, 
    {name:"Centro comercial Moctezuma", location:"avenue3"}, 
    {name:"Ernst Handel", location:"avenue4"}, 
    ]; 

<table align=center> 
    <tr ng-repeat="x in records"> 
     <td>{{x}}</td> 
     <td>{{x}}</td> 
    </tr> 
</table>

来源

2017-02-27 06:48:05

我知道如何提取json的细节。我想要如描述中所示的那样并排放置两个json对象。我很欣赏你的努力，虽然 – Raj

哦，你想两个物体并排？现在看到我更新的答案。 –

更改像下面

<!DOCTYPE html> 
<html> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
 
<body ng-app="myApp" ng-controller="myCtrl"> 
 
<h1 ng-repeat="x in records" ng-if="$even"> 
 
<table align=center> 
    <tr> 

     <td>{{x}}</td> 
     <td>{{records[$index+1]}}</td> 
    </tr> 
</table> 
</h1> 
 
<script> 
var app = angular.module("myApp", []); 
app.controller("myCtrl", function($scope) { 
    $scope.records = [ 
    "Alfreds Futterkiste", 
    "Berglunds snabbköp", 
    "Centro comercial Moctezuma", 
    "Ernst Handel", 
    ] 
}); 
</script> 
 
</body> 
</html>

来源

2017-02-28 07:31:10 Rohit

使用ng-repeat在角度js中填充表格

回答

相关问题