使用奇数和偶数逻辑执行2 ng-repeat循环

时间:2016-07-05 10:50:05

标签: javascript jquery angularjs angularjs-ng-repeat

我有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显示为Observable.combineLatest(number1.rx_text, number2.rx_text, number3.rx_text) { textValue1, textValue2, textValue3 -> Int in return (Int(textValue1) ?? 0) + (Int(textValue2) ?? 0) + (Int(textValue3) ?? 0) } .map { $0.description } .bindTo(result.rx_text) .addDisposableTo(disposeBag)

2 个答案:

答案 0 :(得分:4)

试试这个。 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>

答案 1 :(得分:3)

以下是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>