如何在一个有角的ng-repeat中创建一个新的行?

时间：2022-08-25 23:32:12

I have an ng-repeat creating rows, and I want to insert a new row periodically, but the logic for creating this is inside the row and ends up messing up the nesting, for example:

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

I want the "day divider" rows amongst the data rows whenever the day changes.

我想要数据行之间的“日分隔符”行，当一天发生变化时。

6 个解决方案

#1

3  

You can use ng-repeat-start and ng-repeat-end as follow:

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

演示

#2

0  

UPDATE

更新

What about having new method in your controller like isDivider(item) which would return bool value.

如果在控制器中有新的方法，比如isDivider(项目)，它将返回bool值。

I did not test this but it should work:

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

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

#3

0  

Sounds like you might want to group the data by days and do two nested repeaters.

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

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>

Note: if you want the grouped rows to be ordered properly, you might want to store your day as an integer, and only change how it displays. Since you can't "actually" sort object keys, they auto-sort alphabetically in the JS engine, you can have them sorted properly if they are numeric.

注意:如果您希望分组的行被正确地排序，您可能希望将您的一天存储为一个整数，并且只更改它的显示方式。由于您不能“实际上”排序对象键，所以它们在JS引擎中按字母顺序自动排序，因此如果它们是数值类型，您可以让它们正确排序。

#4

0  

This works although it seems gross:

虽然这看起来很恶心，但却很有效:

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

#5

0  

Plz try this one

请试试这个

   <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

演示

#6

0  

You can use repeat-start and 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>

#1

3  

You can use ng-repeat-start and ng-repeat-end as follow:

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

演示

#2

0  

UPDATE

更新

What about having new method in your controller like isDivider(item) which would return bool value.

如果在控制器中有新的方法，比如isDivider(项目)，它将返回bool值。

I did not test this but it should work:

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

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

#3

0  

Sounds like you might want to group the data by days and do two nested repeaters.

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

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>

Note: if you want the grouped rows to be ordered properly, you might want to store your day as an integer, and only change how it displays. Since you can't "actually" sort object keys, they auto-sort alphabetically in the JS engine, you can have them sorted properly if they are numeric.

注意:如果您希望分组的行被正确地排序，您可能希望将您的一天存储为一个整数，并且只更改它的显示方式。由于您不能“实际上”排序对象键，所以它们在JS引擎中按字母顺序自动排序，因此如果它们是数值类型，您可以让它们正确排序。

#4

0  

This works although it seems gross:

虽然这看起来很恶心，但却很有效:

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

#5

0  

Plz try this one

请试试这个

   <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

演示

#6

0  

You can use repeat-start and 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>
标签：

相关文章