我怎样才能只使用 ng-repeat 填充 html 中的数据，而不是重复 Html 元素？答案

【问题标题】：how can i only use ng-repeat for fill data in html ,not repeat Html's elements?我怎样才能只使用 ng-repeat 填充 html 中的数据，而不是重复 Html 元素？
【发布时间】：2016-04-08 02:43:34
【问题描述】：

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

我只想在 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-grid 创建的。现在我想从数据库的表格中阅读许多文章然后我将这些数据放在网格的列中。{就像“pinterest 风格”页面}a pic for more explain , please see it

【问题讨论】：

使用任何数据表插件...
或者创建一个返回你想要的 html 代码的方法：generateHtml()... ng-repeat 有一个明确的目的，重复 html 标签。
感谢您的意见。是否有任何其他角度指令可以移动元素并为我们做点什么？为什么我会得到 2 个否定标记？

标签： javascript html angularjs ng-repeat semantic-ui

【解决方案1】：

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

$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

【讨论】：

【解决方案2】：

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

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

【讨论】：

非常感谢。有用。并创建一个包含 2 列的表，并用不同的用户填充每个 td 。但请记住，我不想在每个 ng-repeat 步骤中创建新的 html 标记。再次感谢。
@MohsenRezaei 如果它解决了您的问题，请不要忘记标记问题。

【解决方案3】：

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

【讨论】：

这将创建 6 个相同的 tbody 元素。
谁投了反对票，你明白什么问题了吗？ :D
非常感谢。它产生的行比我想要的多。，我尝试使用 users[$index++] 不幸的是它也没有用。再次感谢。
太棒了！我希望您通过 $index 了解了跟踪的概念，并且您可以随意使用它。我想知道，一个人永远不应该寻找准备使用的代码，而应该理解这个概念。