Javascript 如何在有角度的ng重复中创建新行？_Javascript_Html_Angularjs_Html Table

Javascript 如何在有角度的ng重复中创建新行？

javascript html angularjs

Javascript 如何在有角度的ng重复中创建新行？,javascript,html,angularjs,html-table,Javascript,Html,Angularjs,Html Table,我有一个ng repeat创建行，我想周期性地插入一个新行，但创建新行的逻辑是在行内部的，最终会弄乱嵌套，例如： <tr ng-repeat='item in items'>  <tr ng-if='items[$index].day != items[$index-1].day'> <td colspan=2> NEW DA

我有一个

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>


新的一天
{{item.name}
{{item.day}

每当日期发生变化时，我希望数据行中包含“日分隔符”行

更新

在控制器中使用新方法怎么样，比如

isDivider（item）

，它将返回布尔值

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

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


新的一天
{{item.name}
{{item.day}

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


{{item.name}
{{item.day}
展开/折叠内容

尽管这看起来很恶心，但它仍然有效：

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


新的一天
{{item.name}
{{item.day}

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

angular.module（'app'，[]）；
角度。模块（'app'）。控制器（'Ctrl'，函数（$scope）{
$scope.rows=[
{name:'一'，day:'星期一'}，
{name:'two'，day:'monday'}，
{姓名：'三'，日期：'星期二'}，
{姓名：'四'，日期：'星期二'}，
{姓名：“五”，日期：“星期四”}
];
var groupBy=function（arr，property）{//您可以改为使用下划线
var输出={}；
对于（变量i=0；i

{{key}}
{{row.name}
{{row.day}
请试试这个
   <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>


单击我：

展示：
选中复选框时，我将显示。
隐藏：
选中复选框时我将隐藏。

您可以使用重复开始和重复结束：
<tr ng-repeat-start="item in items">
       <td>{{item.name}}</td>
       <td>{{item.day}}</td>
    </tr>
  <tr ng-repeat-end> 
    <td colspan="2">
</tr>


{{item.name}
{{item.day}
你能更详细地解释一下你到底想做什么吗？也许为~else~条件添加一个空的td
，例如：
@Pankaj Parkar在代码中打错了，have edit应该更有意义，还说我想要“新的一天”每当item.day更改时，数据行中的行。@nickponline您不能在另一个tr
中嵌套tr
。这是无效的HTMLT看一看工作演示的第一个答案：这将创建所有数据，然后创建所有的日期分隔行。我想在日变化时在数据中添加日分割行。哇，我不知道这一点，比我的解决方案简单得多，也更友好+1.OP您需要在ng repeat end
旁边使用ng show
/ng hide
。这不会将展开/折叠上下文放在第一行。{{item.name}{{item.day}}折叠