如何在html中只使用ng repeat来填充数据，而不使用repeat html's元素

how can i only use ng-repeat for fill data in html ,not repeat Html's elements?

本文关键字：repeat html 元素 ng 填充 数据      更新时间：2023-09-26

我想在一个用户数组上进行迭代，并在数组中用一个唯一的用户填充每个td，但我不想在每个ng-repeat的步骤中重复并生成新的html代码。

我只想在td上移动一个，对于每个td，在td中放置一个用户。

 <!DOCTYPE html>
<html ng-app="fill">
<head>
<?php include "includes/head.php" ?> 
<script type="text/javascript">
    (function(){
        var fill=angular.module("fill",[]);
            fill.controller("fillTable",function($scope){
            $scope.users=[  {name:"jack"},
                            {name:"joe"},
                            {name:"alen"},
                            {name:"mina"},
                            {name:"mari"},
                            {name:"karen"}
                        ];
        });
    })()
</script>
</head>
<body>
    <table ng-controller="fillTable" border=1>
        <tbody  ng-repeat="user in users">
            <tr>
                <td>user 1:{{user.name}}</td>
                <td>user 2:{{user.name}}</td>
            </tr>
            <tr>
                <td>user 3:{{user.name}}</td>
                <td>user 4:{{user.name}}</td>
            </tr>
            <tr>
                <td>user 5:{{user.name}}</td>
                <td>user 6:{{user.name}}</td>
            </tr>
        </tbody>    
    </table>
</body>
</html>

实际上，我有一个有四列的网格，我通过语义ui网格创建了它。现在我想从数据库的表中读很多文章，然后我把这些数据放在网格的列中。｛就像一个"pinterest风格"页面｝一张图片，了解更多解释，请参阅

您可以在控制器中创建对：

$scope.users = [
 {name:"jack"},
 {name:"joe"},
 {name:"alen"},
 {name:"mina"},
 {name:"mari"},
 {name:"karen"}
];
$scope.pairs = [];
for (var i = 0; i < $scope.users.length; i+=2) {
  $scope.users[i].index = i+1;
  if ($scope.users[i+1]) {
    $scope.users[i+1].index = i+2;
    $scope.pairs.push([$scope.users[i], $scope.users[i+1]]);
  } else {
    $scope.pairs.push([$scope.users[i]]);
  }
}

并在对上迭代：

<table ng-controller="fillTable" border=1>
    <tbody>
        <tr ng-repeat="pair in pairs">
            <td ng-repeat="user in pair">user {{user.index}}:{{user.name}}</td>
        </tr>
    </tbody>    
</table>

除了制作一个包含用户对的特殊数组之外，没有其他解决方法：

$scope.$watch('users', function() {
   $scope.userPairs = [];
   for (var i=0;i<$scope.users.length;i=i+2) {
      $scope.userPairs.push({  
        name1 : $scope.users[i].name, 
        name2 : $scope.users[i+1].name
      })
   }     
})

也要正确使用ng-repeat（您想迭代<tr>而不是<tbody>的：

<table border=1>
    <tbody>
        <tr ng-repeat="user in userPairs">
            <td>user 1:{{user.name1 }}</td>
            <td>user 2:{{user.name2 }}</td>  
        </tr> 
    </tbody>    
</table>

演示->http://plnkr.co/edit/yK3F9US4XuS6sPnVv0Dd?p=preview

<table ng-controller="fillTable" border=1>
    <tbody  ng-repeat="user in users track by $index">
        <tr>
            <td>user 1:{{users[$index].name}}</td>
            <td>user 2:{{users[$index+1].name}}</td>
        </tr>
        <tr>
            <td>user 3:{{users[$index+2].name}}</td>
            <td>user 4:{{users[$index+3].name}}</td>
        </tr>
        <tr>
            <td>user 5:{{users[$index+4].name}}</td>
            <td>user 6:{{users[$index+5].name}}</td>
        </tr>
    </tbody>    
</table>
相关文章：