Question

我有这个UI按这种顺序排列：

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

但我的JSON按此顺序排列：{AM，AM，AM，AM，PM，PM，PM，PM}

我尝试过使用ng-repeat和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结合起来一样。

Answer 1

试试这个代码段：

angular.module('testApp', [])

.controller('homeCtrl', ['$scope', function($scope) {
 	$scope.forecasts = ['AM', 'AM', 'AM', 'AM', 'PM', 'PM', 'PM', 'PM']
}])

.column {
	width: 50px;
	display: inline-block;
	margin-right: 20px;
}

.am {
	border-right: 1px solid black;
	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>

Answer 2

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

但在我看来，这不是最佳方式。

angularJS check ng-repeat with ng-if alternate

2 个答案: