我使用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的不良形式,但如果我错了,请纠正我)
当我通过wkhtmltopdf将html转换为PDF时,我想避免在html中的表行内部分页.我使用page-break-inside:避免使用table-它的工作,但是我有很多行,然后没有工作.如果将tr的显示设置为块或其他内容,则会更改表的格式并插入双边框.或者可以在分割表的每个页面上插入表头.
我有一个名为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) 我正在寻找一种向表中添加行的方法.我的数据结构如下:
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类等.
有两个表,宽度为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)
任何帮助将受到高度赞赏.
我正在使用Backbone.js开发应用程序View类在渲染后返回一个元素.如果我使用div或span,这没关系.但是当我开始将对象渲染为tr行时,问题就开始了.一个对象应该渲染为2-3行.那么我可以使用这种结构吗?
<table>
<div>
<tr>...</tr>
<tr>...</tr>
</div>
</table>
Run Code Online (Sandbox Code Playgroud) 嗨我有一个简单的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) 我无法实现两个嵌套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中嵌套调用?
如果<tbody>HTML中有多个标签<table>,这是否有效?
<table>
<tbody>
</tbody
<tbody>
</tbody
</table>
Run Code Online (Sandbox Code Playgroud) 因为例子总是告诉更多,然后这里的单词是我想用另一种语言做的
<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的例子,它显然不能像我希望的那样工作.有什么指示可以做到这一点?
html ×5
angularjs ×4
javascript ×4
css ×3
html-table ×2
reactjs ×2
backbone.js ×1
jsx ×1
width ×1
wkhtmltopdf ×1