Question

我有一个ng-repeat创建行，我想定期插入一个新行，但创建它的逻辑在行内并最终弄乱了嵌套，例如：

  <tr ng-repeat='item in items'>

       <!-- this doesn't work well -->
       <tr ng-if='items[$index].day != items[$index-1].day'>
       <td colspan=2>
       NEW DAY
       </td>
       </tr>

       <td>{{item.name}}</td>
       <td>{{item.day}}</td>

    </tr>

每当日期发生变化时，我希望数据行中存在“day divider”行。

Answer 1

您可以使用ng-repeat-start和ng-repeat-end，如下所示：

<tr ng-repeat-start="item in items">
       <td>{{item.name}}</td>
       <td>{{item.day}}</td>
    </tr>
    <tr ng-repeat-end>
       <td>Expand/collapse content</td>
    </tr>

Demo

Answer 2

<强>更新

在你的控制器中使用新方法如isDivider(item)会返回bool值。

我没有对此进行测试，但它应该有效：

    <tr ng-repeat='item in items'>

       <td ng-if="isDivider(item)==true" colspan=2>NEW DAY<td>

       <td ng-if="isDivider(item)==false">{{item.name}}</td>
       <td ng-if="isDivider(item)==false">{{item.day}}</td>

    </tr>

Answer 3

虽然看起来很糟糕，但仍有效：

         <tr ng-repeat-start='item in items'>

               <tr ng-if='items[$index].day != items[$index-1].day'>
               <td colspan=2>
               NEW DAY
               </td>
               </tr>



               <td>{{item.name}}</td>
               <td>{{item.day}}</td>

            </tr>

      <!-- dummy row -->
      <tr ng-repeat-end></tr>

Answer 4

听起来您可能希望按天分组数据并执行两个嵌套转发器。

angular.module('app', []);
angular.module('app').controller('Ctrl', function($scope) {
  $scope.rows = [
    { name: 'one', day: 'monday' },
    { name: 'two', day: 'monday' },
    { name: 'three', day: 'tuesday' },
    { name: 'four', day: 'tuesday' },
    { name: 'five', day: 'thursday' }
  ];
  
  var groupBy = function(arr, property) { // you can use Underscore instead
    var output = {};
    
    for (var i = 0; i < arr.length; i++) {
      var item = arr[i];
      if (typeof output[item[property]] === 'undefined') {
        output[item[property]] = [];
      }
      if (item.hasOwnProperty(property)) {
        output[item[property]].push(item);
      }
    }
    
    return output;
  };
  
  $scope.groupedRows = groupBy($scope.rows, 'day');
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app">
  <div ng-controller="Ctrl">
    <table>
      <!-- it's valid to have more than one tbody -->
      <tbody ng-repeat="(key, group) in groupedRows">
        <tr>
          <th colspan="2">{{key}}</th>
        </tr>
        <tr ng-repeat="row in group">
          <td>{{row.name}}</td>
          <td>{{row.day}}</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

注意：如果您希望正确排序分组的行，您可能希望将您的日期存储为整数，并且只更改其显示方式。由于您无法“实际”对对象键进行排序，因此它们会在JS引擎中按字母顺序自动排序，如果它们是数字的，您可以将它们正确排序。

Answer 5

Plz尝试这个

   <body ng-app="ngAnimate">
  Click me: <input type="checkbox" ng-model="checked" aria-label="Toggle ngHide"><br/>
<div>
  Show:
  <div class="check-element animate-show" ng-show="checked">
    <span class="glyphicon glyphicon-thumbs-up"></span> I show up when your checkbox is checked.
  </div>
</div>
<div>
  Hide:
  <div class="check-element animate-show" ng-hide="checked">
    <span class="glyphicon glyphicon-thumbs-down"></span> I hide when your checkbox is checked.
  </div>
</div>
</body>

Demo

Answer 6

您可以使用repeat-start和repeat-end：

<tr ng-repeat-start="item in items">
       <td>{{item.name}}</td>
       <td>{{item.day}}</td>
    </tr>
  <tr ng-repeat-end> 
    <td colspan="2">
</tr>

如何在角度ng-repeat中创建新行？

6 个答案: