Angularjs Table error

Question

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

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

Thanks in advance, Amar.T

Mike Sav · Accepted Answer · 2015-11-19 13:37:55Z

2

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>

edited Nov 19, 2015 at 13:37

answered Nov 19, 2015 at 13:32

Mike Sav

15.4k31 gold badges104 silver badges150 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Amar Over a year ago

Thanks @Mike. I applied your suggestion "<td>{{entity.fieldLength || entity.familyName}}</td>" and it worked for me. Thanq very much Mike.

Maccurt · Accepted Answer · 2015-11-19 13:56:35Z

0

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.

answered Nov 19, 2015 at 13:56

Maccurt

14k8 gold badges36 silver badges46 bronze badges

Collectives™ on Stack Overflow

Angularjs Table error

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related