angularJS檢查NG重複與NG-如果交替

我有這個UI在這樣的順序排列：angularJS檢查NG重複與NG-如果交替

AM | PM 
AM | PM 
AM | PM 
AM | PM

，但我的JSON是按以下順序：{AM，AM，AM，AM，PM， PM，PM，PM}

我試圖用NG-重複和NG-IF（您可能會看到下面的代碼），但遺憾的是它加載這樣的：

AM | AM | (note: Am has right border) 
AM | AM | 
PM   PM 
PM   PM

這裏是我的代碼：

<div class="row main"> 
    <div ng-repeat="forecast in forecasts" class="column-left"> 
    <div ng-if="forecast.hour.indexOf('AM') !== -1" class="row"> 
      //here will be the AM 
    </div> 
    <hr> 
    </div> 
    <div ng-repeat="forecast in forecasts" class="column-right"> 
     <div ng-if="forecast.hour.indexOf('PM') !== -1" class="row"> 
     //here will be the PM       
     </div> 
     <hr> 
    </div> 
</div>

注：我試圖分開ng-repeat，以便它不會混淆但仍然失敗。就像我把它與單一的ng-repeat一樣。

來源

2015-08-23 jaspher chloe

你的問題不清楚，你可以創建一個蹲式或小提琴嗎？ –

試試這個片斷：

angular.module('testApp', []) 
 

 
.controller('homeCtrl', ['$scope', function($scope) { 
 
    \t $scope.forecasts = ['AM', 'AM', 'AM', 'AM', 'PM', 'PM', 'PM', 'PM'] 
 
}])

.column { 
 
\t width: 50px; 
 
\t display: inline-block; 
 
\t margin-right: 20px; 
 
} 
 

 
.am { 
 
\t border-right: 1px solid black; 
 
\t padding-right: 10px; 
 
}

<script src="https://code.angularjs.org/1.4.3/angular.min.js"></script> 
 
<body ng-app="testApp"> 
 
    <section ng-controller="homeCtrl"> 
 
    <div class="row main"> 
 
     
 
     <div class="column column-left"> 
 
     <div ng-repeat="forecast in forecasts track by $index" ng-if="forecast == 'AM'" class="am" ng-bind="::forecast"></div> 
 
     </div> 
 
     
 
     <div class="column column-right"> 
 
     <div ng-repeat="forecast in forecasts track by $index" ng-if="forecast == 'PM'" class="pm" ng-bind="::forecast"></div> 
 
     </div> 
 
    </div> 
 
    </section> 
 
</body>

來源

2015-08-23 15:32:09

喜歡的東西this？

<table> 
    <tr> 
    <td> 
     <div ng-repeat="forecast in forecasts" ng-if="forecast.time === 'AM'"> 
     {{forecast}} 
     <hr> 
     </div> 
    </td> 
    <td> 
     <div ng-repeat="forecast in forecasts" ng-if="forecast.time === 'PM'"> 
     {{forecast}} 
     <hr> 
     </div> 
    </td> 
    </tr> 
</table>

但在我看來，這不是最好的方法。

來源

2015-08-23 15:37:12 user3335966

angularJS檢查NG重複與NG-如果交替

回答

相關問題