相关疑难解决方法(0)

Angular.js ng-repeat跨越多个tr

我使用Angular.js作为一个应用程序,它使用隐藏的trs来模拟滑出效果,方法是显示tr并向下滑动下面td中的div.当迭代这些行的数组时,这个过程使用knockout.js非常有效,因为我可以使用<!-- ko:foreach -->两个tr元素.

对于angular,ng-repeat必须应用于html元素,这意味着我似乎无法使用标准方法重复这些双行.我对此的第一个回应是创建一个表示这些双trs的指令,但由于指令模板必须有一个根元素,但我有两个(<tr></tr><tr></tr>).

如果有任何有ng-repeat和angular经验的人已经破解了这个可以解释如何解决这个问题,我将非常感激.

(我还应该注意,附加ng-repeat到tbody是一个选项,但这会产生多个tbodys,我认为这是标准HTML的不良形式,但如果我错了,请纠正我)

html javascript angularjs

124
推荐指数
2
解决办法
7万
查看次数

避免在表格行内部分页

当我通过wkhtmltopdf将html转换为PDF时,我想避免在html中的表行内部分页.我使用page-break-inside:避免使用table-它的工作,但是我有很多行,然后没有工作.如果将tr的显示设置为块或其他内容,则会更改表的格式并插入双边框.或者可以在分割表的每个页面上插入表头.

html css wkhtmltopdf

88
推荐指数
10
解决办法
13万
查看次数

如何包装一个返回多个表行的React组件,并避免"<tr>不能显示为<div>的子项"错误?

我有一个名为OrderItem的组件,它接受一个包含多个对象(至少两个)的对象,并将它们呈现为表中的多个行.表中将有多个OrderItem组件.问题是在组件的渲染功能中,我不能返回多行.我只能返回一个组件,如果我将它们包装在一个div中,它会说" <tr>不能作为一个孩子出现<div>"

代码看起来像这样(为了更容易阅读,我留下了一些东西)

Parent() {
  render() {
    return (
      <table>
        <tbody>
          {
            _.map(this.state.orderItems, (value, key) => {
              return <OrderItem value={value} myKey={key}/>
            })
          }
        </tbody>
      </table>
    )
  }
}

class OrderItem extends React.Component {
  render() {
    return (
      <div> // <-- problematic div
        <tr key={this.props.myKey}>
          <td> Table {this.props.value[0].table}</td>
          <td> Item </td>
          <td> Option </td>
        </tr>
        {this.props.value.map((item, index) => {
          if (index > 0) { // skip the first element since it's already used above
            return (
              <tr key={this.props.myKey …
Run Code Online (Sandbox Code Playgroud)

javascript reactjs

46
推荐指数
4
解决办法
3万
查看次数

使用ng-repeat和嵌套循环添加行

我正在寻找一种向表中添加行的方法.我的数据结构如下:

  rows = [
    { name : 'row1', subrows : [{ name : 'row1.1' }, { name : 'row1.2' }] },
    { name : 'row2' }
  ];
Run Code Online (Sandbox Code Playgroud)

我想创建一个看起来像这样的表:

  table
     row1
     row1.1
     row1.2
     row2
Run Code Online (Sandbox Code Playgroud)

有角度js ng-repeat可能吗?如果不是,这样做的"有角度"方式是什么?

编辑:展平数组将是一个糟糕的解决方案,因为如果我可以遍历子元素我可以在单元格内使用不同的html标签,其他css类等.

javascript angularjs

42
推荐指数
5
解决办法
5万
查看次数

对于两个表,表列宽度必须相同

有两个表,宽度为600px,每个列为5列.但是,尚未为每列设置宽度.在这里,我想让两个表中的列宽必须相同.你可以使用CSS或jQuery.而且,我不想手动修复列宽.

HTML示例:

<table width="600" border="1" cellspacing="0" cellpadding="0">
    <tr>
        <td>hdng 1</td>
        <td>hdng 2</td>
        <td>hdng 3</td>
        <td>hdng 4</td>
        <td>hdng 5</td>
    </tr>
</table>
<table width="600" border="1" cellspacing="0" cellpadding="0">
    <tr>
        <td>content content content</td>
        <td>con</td>
        <td>content content content</td>
        <td>content content content</td>
        <td>content content content</td>
    </tr>
</table>
Run Code Online (Sandbox Code Playgroud)

任何帮助将受到高度赞赏.

html css width

18
推荐指数
4
解决办法
4万
查看次数

用div分组tr标签真是个坏主意吗?

我正在使用Backbone.js开发应用程序View类在渲染后返回一个元素.如果我使用div或span,这没关系.但是当我开始将对象渲染为tr行时,问题就开始了.一个对象应该渲染为2-3行.那么我可以使用这种结构吗?

<table>
    <div>
        <tr>...</tr>
        <tr>...</tr>

    </div>
</table>
Run Code Online (Sandbox Code Playgroud)

html html-table backbone.js

17
推荐指数
2
解决办法
2万
查看次数

angularjs:ng-repeat-start和ng-repeat-end with inner ng-repeat

嗨我有一个简单的ng-repeat-start和end用例,工作得很好,当我想添加内部ng-repeat时出现问题.这是我的代码

<tr ng-repeat-start="obj in rows" >
  <td ng-repeat="e in obj.row">{{e}}</td>
</tr>
<tr ng-repeat-end>
  <td colspan="4">{{obj.description}}</td>
<tr>
Run Code Online (Sandbox Code Playgroud)

内部ng-repeat到td元素不起作用,当我检查html源代码时,我看到了ngRepeat注​​释,但是没有创建td元素.

<!-- ngRepeat: e in obj.row -->
Run Code Online (Sandbox Code Playgroud)

我丑陋的解决方法(假设我知道该向量的大小)是:

<tr ng-repeat-start="obj in rows" >
  <td>{{obj.row[0]}}</td>
  <td>{{obj.row[1]}}</td>
  <td>{{obj.row[2]}}</td>
  <td>{{obj.row[3]}}</td>
</tr>
<tr ng-repeat-end>
  <td colspan="4">{{obj.description}}</td>
<tr>
Run Code Online (Sandbox Code Playgroud)

angularjs angularjs-ng-repeat

16
推荐指数
1
解决办法
5万
查看次数

如何在JSX中使用map嵌套循环?

我无法实现两个嵌套map:

render() {
    return (
      <table className="table">
        <tbody>
          {Object.keys(this.state.templates).map(function(template_name) {
            return (
              <tr key={template_name}><td><b>Template: {template_name}</b></td></tr>

              {this.state.templates[template_name].items.map(function(item) {
                return (
                  <tr key={item.id}><td>{item.id}</td></tr>
                )
              })}
            )
          })}
        </tbody>
      </table>
    )
  }
Run Code Online (Sandbox Code Playgroud)

这给了一个SyntaxError: unknown: Unexpected token.

你如何map在JSX中嵌套调用?

javascript jsx reactjs

16
推荐指数
2
解决办法
2万
查看次数

如果使用多个tbody标签,html表是否有效?

如果<tbody>HTML中有多个标签<table>,这是否有效?

<table>
    <tbody>
    </tbody
    <tbody>
    </tbody
</table>
Run Code Online (Sandbox Code Playgroud)

html css html-table

11
推荐指数
2
解决办法
7334
查看次数

angularJS - 在表中重复tr,但在循环时动态添加更多行

因为例子总是告诉更多,然后这里的单词是我想用另一种语言做的

<tr>
    <c:forEach items="${items}" var="item"> 
      <td>...</td>
      <td>...</td>
      <td>...</td>
      <c:if test="${item.showWarning}">
         </tr><tr><td colspan="3">${item.warning}</td>
      </c:if>
</tr>
Run Code Online (Sandbox Code Playgroud)

因此,这将循环一组项目并显示这些项目的一些属性.如果有警告,将在当前行下方添加一个新行,其中将显示警告.但是,我怎么能在angularJs中做到这一点?如果我在tr上放置一个ng-repeat,它将停在tr的第一个结束标记处.我已经读过其他一些线程,这不是很容易做到的,但它怎么做呢?是的,我确实想要使用一张桌子.这是我设计的angularjs的例子,它显然不能像我希望的那样工作.有什么指示可以做到这一点?

JSBin与tr-ng-repeat的例子

angularjs angularjs-ng-repeat

10
推荐指数
2
解决办法
3万
查看次数