javascript - Angularjs 表错误

Question

我对 UI 开发非常陌生。我正在使用 AngularJS。我正在尝试在表格中打印所有值。为此，我使用 Angularjs 表。我有一个标题，每个标题都有多个值。对于一个 header ，该值将根据 header 而变化。这是我的代码。

<div>
	<table datatable="ng"
		class="table table-striped table-bordered dt-responsive nowrap"
		cellspacing="0" width="100%">
		<thead>
			<tr>
				<th>Entity Name</th>
				<th>Field Name</th>
				<th>{{headerName}}</th>
				<th>DataType</th>
			</tr>
		</thead>
		<tbody>
			<tr data-ng-repeat="entity in metadata">
				<td>{{ entity.entityName }}</td>
				<td>{{ entity.fieldName }}</td>
				<td ng-if="entity.fieldLength != 'undefined'">{{entity.fieldLength}}</td>
				<td ng-if="entity.familyName != 'undefined'">{{entity.familyName}}</td>
				<td><select data-ng-init="dataType = entity.dataTypeList[0]"
					data-ng-model="dataType"
					data-ng-options="dataType for dataType in entity.dataTypeList"
					class="form-control"
					ng-change="onChange(entity.entityName,entity.fieldName,entity.fieldLength,dataType)"></select></td>
			</tr>
		</tbody>
	</table>
</div>

在这里，如果我们观察到其中一个 header “{{headerName}}”，则相应的值将根据该 header 而改变。此 headerName 有两个值(字段长度和系列名称)。我为此使用了“ng-if”。这是两个声明。

<td ng-if="entity.fieldLength != 'undefined'">{{entity.fieldLength}}</td>
<td ng-if="entity.familyName != 'undefined'">{{entity.familyName}}</td>

但是当我执行这段代码时，我在表中得到了一个额外的“td”。这是输出(附件)。

因此“FamilyName”被放置在“DataType”下。这个要怎么调整呢。任何人都可以帮我解决这个问题吗？

提前致谢， 阿马尔.T

Answer 1

不确定我是否完全遵循，但您的标题中是否有可能有四列，而实际表格中可能有 5 列？这是问题吗...当您执行以下操作来检查未定义时也会发生什么？

<td ng-if="typeof(entity.fieldLength) !== 'undefined'">{{entity.fieldLength}}</td>
<td ng-if="typeof(entity.familyName) !== 'undefined'">{{entity.familyName}}</td>

但是为什么不像这样组合逻辑，这样就可以在没有 ng-if 且不需要两个 HTML 列的情况下显示 vaue？

<td>{{entity.fieldLength || entity.familyName}}</td>