CODEWITHSUNDEEP
javascriptjqueryhtmlangularjs
Amar
Amar

Reputation: 763

Angularjs Table error

I am very new to the UI development. I am using the AngularJS. I am trying to print all my values in a table. For that I am using Angularjs table. I have a headers and each header has multiple values. For one header the value will change based on the header. Here is my code.

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

Here if we observe one of the header "{{headerName}}" and this corresponding value will change based on this header. This headerName has two values (Field Length and Family Name). I used "ng-if" for this. Here are the two statements.

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

But when I execute this code I am getting an extra "td" in the table. Here is the output (Attachment). enter image description here

So "FamilyName" are placed under "DataType" td. How can adjust this one. Can any one help me on this.?

Thanks in advance, Amar.T

Upvotes: 0

Views: 74

Answers (2)

Maccurt
Maccurt

Reputation: 13817

Perhaps, also if possible you can move that logic into your controller (service,etc) That would make it easier to test. I think the answer above is correct also.

Upvotes: 0

Mike Sav
Mike Sav

Reputation: 15291

Not sure if I exactly follow but Is it possible you have four columns in your header and potentially 5 columns in your actual table? Is this the problem... also what happens when you do the following to check for undefined?

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

but why not combine the logic like so, so a vaue is shown without the ng-if and the need for two HTML columns?

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

Upvotes: 2

Related Questions