如何在角函数ng-repeat中创建新行

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

本文关键字：创建 新行 ng-repeat 函数      更新时间：2023-09-26

我有一个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>

我想要"日分隔符"行之间的数据行每当一天改变。

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

UPDATE

在你的控制器中有一个新的方法，比如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>

听起来您可能想要按天对数据进行分组，并做两个嵌套的中继器。

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引擎中自动按字母顺序排序，如果它们是数字，你可以让它们正确排序。

虽然看起来很恶心，但这是可行的:

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

请试试这个

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

你可以使用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>
相关文章：