用奇偶逻辑执行 2 ng-repeat 循环答案

【问题标题】：Execute 2 ng-repeat loop with odd and even logic用奇偶逻辑执行 2 ng-repeat 循环
【发布时间】：2016-07-05 10:50:04
【问题描述】：

我有 2 个表，我想在其中使用 ng-repeat 显示奇数和偶数记录。

我希望奇数记录显示在顶部，偶数记录显示在奇数记录之后。

对于表1标签：奇数逻辑

对于表2标签：偶数逻辑

这是我的代码：

<table>
   <tr>
      <td ng-repeat="item in Users" ng-if="$odd" >
         <!--some other codes-->  
         <!--show div1-->   
         <div ng-if="item.Experience > 0" >
         </div>
         <!--show div2-->   
         <div ng-if="item.Experience == 0" >
         </div>
      </td>
   </tr>
</table>

<table>
   <tr>
      <td ng-repeat="item in Users" ng-if="$even" >
         <!--some other codes-->  
         <!--show div1-->   
         <div ng-if="item.Experience > 0" >
         </div>
         <!--show div2-->   
         <div ng-if="item.Experience == 0" >
         </div>
      </td>
   </tr>
</table>

json 输出：

[
  {
    "UserId": 1,
    "Experience":2
  },
  { 
    "UserId": 2,
    "Experience":0
  }
]

但是这里奇数记录，即UserId 1，显示在偶数记录User Id 2 出现在顶部并且User 1 下降之后。

【问题讨论】：

标签： javascript jquery angularjs angularjs-ng-repeat

【解决方案1】：

试试这个。对于odd 记录

 <tr ng-repeat="item in Users" ng-if="item.UserId %2 == 1">
         <td>
          {{item.UserId}}
          </td>
  </tr>

对于even 记录：

    <tr ng-repeat="item in Users" ng-if="item.UserId %2 == 0">
         <td>
           {{item.UserId}}
          </td>
   </tr>

【讨论】：

现在考虑我有 4 个用户 ID，如下所示：1,2,3,4，如果我删除用户 ID 1 和 3，则 ID 为 2 和 4 的记录将仅显示在偶数部分中根据你的逻辑，我仍然希望用户 id 2 显示在奇数部分，4 显示在偶数部分
$index in ng-repeat 以 0 开头。看到这个plnkr.co/edit/w6IJ1vfNcqtNURUSwCsV?p=preview
是的，你是对的 :)，我专注于 ng-如果对不起我的坏事。
所以当我在第一个表中添加 $even 并在第二个表中添加 $odd 并且我有 3 条记录时，第一条记录出现在第一个表中，但第二和第三条记录出现在第二个表中

【解决方案2】：

这里是 plunker：https://plnkr.co/edit/84dbmzTPgHTi3x8WmKOM?p=preview

<html><head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="app" ng-controller=" ActCtrl">

<table>
       <tr ng-repeat="item in data1" ng-if="$odd">
              <td>{{ $index + 1 }}


                <!--some other codes-->  
               <!--show div1-->   
                <div class="odd"  ng-if="item.Experience > 0" >
                </div>

               <!--show div2-->   
                <div class="odd" ng-if="item.Experience == 0" >
                </div>
              </td>
       </tr>
 </table>


 <table>
       <tr ng-repeat="item in data1" ng-if="$even">
              <td>{{ $index + 1 }}

                <!--some other codes-->  
               <!--show div1-->   
                <div class="even" ng-if="item.Experience > 0" >
                </div>

               <!--show div2-->   
                <div class="even" ng-if="item.Experience == 0" >
                </div>
              </td>
       </tr>
 </table>
</body>
</html>

【讨论】：

我的行，即 tr 标签将为 1，其中我的 td 标签生成将取决于此循环运行的次数