Question

我可以逐行填充内容。但是，我想知道如何用两列填充表格。我希望它按列填充而不重复内容。基本上，它应该返回一个包含两行和两列的表。

<!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>

Answer 1

在AngularJS中，数据主要以JSON方式处理，并作为数组数据结构收集。

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

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

<!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>

Answer 2

更改您的代码，如下所示

<!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>

Answer 3

你的$ scope没有采取，改变你的$ scope像js数组的对象。并在正确的地方重复ng-repeat。像下面一样更改您的代码。

<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>

使用ng-repeat

3 个答案: