创建具有Angular.js表 [英] Creating tables with Angular.js

问题描述

我试图创建Angular.js表里面会有单元的跨越多行。

例如：

http://jsfiddle.net/famedriver/kDrc6/

实例数据

  VAR数据= [{颜色：红色，绿色，蓝色]}]
 

期望的输出

 ＆LT;表＆gt;
  ＆所述; TR＆GT;
    ＆LT; TD ROWSPAN =3＆GT;颜色和LT; / TD＆GT;
    ＆LT; TD＆GT;红色和LT; / TD＆GT;
  ＆LT; / TR＆GT;
  ＆所述; TR＆GT;
     ＆LT; TD＆GT;绿色＆LT; / TD＆GT;
  ＆LT; / TR＆GT;
  ＆所述; TR＆GT;
     ＆LT; TD＆GT;蓝色＆LT; / TD＆GT;
  ＆LT; / TR＆GT;
 ＆LT; /表＆gt;
 

我把它通过使用 NG-节目指令工作。但是仍然呈现一个额外的电池，只是被隐藏了。这将是理想的有表正确显示。

NG-开关，如前所述，不会严格解析某些元素的工作（即：一个表只允许某些标记）

任何意见？

解决方案

使用比较近角版本答题。

由于安德鲁乔斯林写道，在 NG-显示隐藏元素（它适用显示：无）。 NG-开关删除的只是隐藏它们不匹配的元素来代替。但它也需要额外的元素开关时前pression。

自从上次答复， NG-如果已成为一部分角，你不再需要外部库。

\r

\r

（功能（WIN）{\r
  angular.module（'对myApp'，[]）\r
    .controller（测试，函数（$范围）{\r
      $ scope.data = {\r
        颜色：红色，绿色，蓝色]\r
      }\r
    }）\r
}（窗口））;

\r

＆LT;脚本SRC =htt​​ps://ajax.googleapis.com/ajax /libs/angularjs/1.3.15/angular.min.js\"></script>\r
＆LT; D​​IV NG-应用=对myApp＆GT;\r
  ＆LT; H1＆GT;老code转换＆LT; / H1＆GT;\r
  ＆LT; P＆GT;只要转换到一个新的AngularJS＆LT; / P＆GT;\r
  ＆LT;表边框=1NG控制器=测试＆GT;\r
    ＆LT; TBODY NG重复='（什么，物品）在数据'＆GT;\r
      ＆LT; TR NG重复=项中的项目'＆GT;\r
        ＆LT; TD ROWSPAN ={{items.length}}NG秀=$第一＆GT; {{}什么}＆LT; / TD＆GT;\r
        ＆LT; TD＆GT; {{}项}＆LT; / TD＆GT;\r
      ＆LT; / TR＆GT;\r
    ＆LT; / TBODY＆GT;\r
  ＆LT; /表＆gt;\r
  ＆LT; H1＆GT;通过解决方案NG-IF＆LT; / H1＆GT;\r
  ＆LT;表边框=1NG控制器=测试＆GT;\r
    ＆LT; TBODY NG重复='（什么，物品）在数据'＆GT;\r
      ＆LT; TR NG重复=项中的项目'＆GT;\r
        ＆LT; TD ROWSPAN ={{items.length}}NG-IF =$第一＆GT; {{}什么}＆LT; / TD＆GT;\r
        ＆LT; TD＆GT; {{}项}＆LT; / TD＆GT;\r
      ＆LT; / TR＆GT;\r
    ＆LT; / TBODY＆GT;\r
  ＆LT; /表＆gt;\r
＆LT; / DIV＆GT;

\r

\r

\r

I am trying to create a table with Angular.js which will have cell's spanning many rows.

Example:

http://jsfiddle.net/famedriver/kDrc6/

Example data

var data = [{Colors: ["red","green","blue"]}]

Expected output

<table>
  <tr>
    <td rowspan="3">Colors</td>
    <td>red</td>
  </tr>
  <tr>
     <td>green</td>
  </tr>
  <tr>
     <td>blue</td>
  </tr>
 </table>

I have it working by using the ng-show directive. But that still renders an extra cell, just hidden. It would be ideal to have the table properly rendered.

ng-switch, as mentioned, won't work in certain elements with strict parsing (ie: a table which only allows certain tags)

Any advice?

解决方案

Answering question using more recent version of Angular.

As Andrew Joslin wrote, the ng-show hides the element (it applies display: none). ng-switch removes non-matching elements instead of just hiding them. But it also requires extra element for switch-when expression.

Since the last answer, the ng-if has become a part of Angular, you no longer need an external library.

(function(win) {
  angular.module('myApp', [])
    .controller("Tester", function($scope) {
      $scope.data = {
        Colors: ["red", "green", "blue"]
      }
    })
}(window));

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<div ng-app="myApp">
  <h1>old code converted</h1>
  <p>Just converted to a newer AngularJS.</p>
  <table border="1" ng-controller="Tester">
    <tbody ng-repeat='(what,items) in data'>
      <tr ng-repeat='item in items'>
        <td rowspan="{{items.length}}" ng-show="$first">{{what}}</td>
        <td>{{item}}</td>
      </tr>
    </tbody>
  </table>
  <h1>solution via ng-if</h1>
  <table border="1" ng-controller="Tester">
    <tbody ng-repeat='(what,items) in data'>
      <tr ng-repeat='item in items'>
        <td rowspan="{{items.length}}" ng-if="$first">{{what}}</td>
        <td>{{item}}</td>
      </tr>
    </tbody>
  </table>
</div>

这篇关于创建具有Angular.js表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！