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

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

更新

在你的控制器中使用新方法怎么样 isDivider(item) 这将 return 布尔值。

我没有对此进行测试，但它应该可以工作：

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

您可以使用 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 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>

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

Answer 5

请试试这个

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

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

How do I create a new row inside an angular ng-repeat?

html

javascript

html-table

angularjs