# Facing a challenge porting Angular 1.x to Aurelia 1

**URL:** <https://discourse.aurelia.io/t/facing-a-challenge-porting-angular-1-x-to-aurelia-1/4271>\
**Category:** Help Requests\
**Created:** [June 23, 2021, 9:51am UTC](https://discourse.aurelia.io/t/facing-a-challenge-porting-angular-1-x-to-aurelia-1/4271 "2021-06-23T09:51:27Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![norgie](https://avatars.discourse-cdn.com/v4/letter/n/57b2e6/32.png) [@norgie](https://discourse.aurelia.io/u/norgie)\
**Post date:** [June 23, 2021, 9:51am UTC](https://discourse.aurelia.io/t/facing-a-challenge-porting-angular-1-x-to-aurelia-1/4271/1 "2021-06-23T09:51:27Z")

</div>

For quite a while (in between other projects) I’ve been working on porting an Angular 1.x SPA to Aurelia 1. Almost all of the porting have gone well but one dialog has recently stopped me dead in my tracks. In said Angular application this dialog contains a table with a fixed header and then multiple `<tbody>` elements (see below). AFAIK these elements get marked with class `ng-scope` (by Angular?)

```auto
<tbody on-finish-render="" ng-repeat="row in model.viewModal.table | searchFilter:searchModel" class="ng-scope">

```

From what little I know about Angular when each tbody element is marked with `ng-scope` the element gets its own “view-model” so to speak and thereby handle any state changes “locally”, i.e. within the “scope”. Now from what I understand about Aurelia is that Aurelia’s view-model “maps” to Angular’s scope (or the other way round). If correct this has led me to assume that I need to wrap each `<tbody>` element in a custom element since adding repeat.for to a tbody doesn’t seem to work. This sort of produces the result I want but it messes up the layout. So I’m stuck and not being able to deliver this functionality to my customer makes me feel quite like an idiot right now.

Caveat: I’m not an Angular developer and I’ve been a long time away from Aurelia.

Complete Angular mark-up:

```auto
<table class="editabletable">
	<thead>
		<tr>
			<th style="width: 47px;">
				<div style="min-width: 36px;min-height: 36px; height: inherit; width: inherit;">
					<input id="headerCheckBox" checked type="checkbox"
						   ng-click="selectAll($event, model.viewModal.table, searchModel)"
						   ng-checked="areAllSelected(model.viewModal.table, searchModel)"
						   ng-disabled="isAnySelectable(model.viewModal.table, searchModel)"/>
				</div>
			</th>
			<th>
				<div class="modalheader" ng-bind="model.viewModal.columnNames[0]"></div>
			</th>
			<th>
				<div class="modalheader" ng-bind="model.viewModal.columnNames[1]"></div>
			</th>
			<th>
				<div class="modalheader" ng-bind="model.viewModal.columnNames[2]"></div>
			</th>
			<th>
				<div class="modalheader" ng-bind="model.viewModal.columnNames[3]"></div>
			</th>
		</tr>
	</thead>
	<tbody on-finish-render ng-repeat="row in model.viewModal.table | searchFilter:searchModel">
		<tr class="parentrow" ng-class="{lockedRow:!row.isSelectable}" ng-init="showExpanded=true;isChecked(row)" ng-show="(displayAll || row.isSelectable)">
			<td style="width: 30px; height: inherit; width: inherit;">
				<span ng-if="!row.isSelectable">
					 <img src="../../img/chain_16px.png" title="{{getText('no.selectable.elements')}}">
				</span>
				<span ng-if="row.isSelectable">
				  <input id="{{'cmpTemp' + row.Code}}" type="checkbox" ng-click="selectAllBelongingToParent($event, row)" ng-checked="row.isSelected"/>
				</span>
			</td>
			<td>
				<a ng-hide="showExpanded" style="width: 300px" ng-click="showExpanded=!showExpanded"><img src="../../img/arrow-right.png" alt=""></a>
				<a ng-show="showExpanded" style="width: 300px" ng-click="showExpanded=!showExpanded"><img src="../../img/arrow-down.png" alt=""></a>
				<span>{{row.Name}} (<b>{{row.numberOfChildrenSelected}}</b>/<b>{{row.totalNumberOfChildren}}</b>)</span>
			</td>
			<td style="min-width: 150px"></td>
			<td style="min-width: 150px"></td>
			<td style="min-width: 150px"></td>
		</tr>
		<tr id="{{'rowElement' + $index}}" ng-repeat="info in row.childMap" 
			ng-class="{childSelectedColour:info.isSelected,lockedRow:!info.isSelectable}" 
			ng-show="showExpanded && (displayAll || info.isSelectable)"
		>
			<td style="min-width: 36px;min-height: 36px;">
				<span ng-if="info.isSelectable">
					<input id="{{'chldTemp' + $index + row.Code}}" type="checkbox" ng-click="childClicked($event, info, row)" ng-checked="info.isSelected"/>
				</span>
				<span ng-if="!info.isSelectable">
					<span ng-if="info.assignedOther !== null">
						<img src="../../img/chain_16px.png" title="{{info.reasonNotSelectable}}">
					</span>
					<span ng-if="info.assignedOther === null">
						<img src="../../img/clock-2_16px.png" title="{{info.reasonNotSelectable}}">
					</span>
				</span>
			</td>
			<td name="xname" style="min-width: 150px">
				<span style="padding-left: 14px">{{row.Name}}</span>
			</td>
			<td>{{info.Name}}</td>
			<td ng-bind="info.otherAssigned"></td>
			<td ng-bind="info.lastAssignedOther"></td>
		</tr>
	</tbody>
</table>

```

Most of the mark-up above is easily ported to Aurelia and this is my first attempt at solving the repeating :

```auto
<template repeat.for="item of tableData | filter:filterInput.value">
  <table-body item.bind="item" showall.bind="showAll" index.bind="$index"></table-body>
</template>

```

where `table-body` is the custom element containing the `<tbody>` mark-up. However, as mentioned above, this messes up the lay-out.

Is what I’m trying to do achievable in Aurelia? If yes, any pointers?

---

<div class="post-metadata">

**Author:** ![jwx](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/jwx/32/507_2.png) [@jwx](https://discourse.aurelia.io/u/jwx)\
**Post date:** [June 23, 2021, 11:44am UTC](https://discourse.aurelia.io/t/facing-a-challenge-porting-angular-1-x-to-aurelia-1/4271/2 "2021-06-23T11:44:02Z")

</div>

I haven’t read this properly, but whenever I see custom element, tables and formatting my first go to is: have you looked into `containerless`?

---

<div class="post-metadata">

**Author:** ![norgie](https://avatars.discourse-cdn.com/v4/letter/n/57b2e6/32.png) [@norgie](https://discourse.aurelia.io/u/norgie)\
**Post date:** [June 23, 2021, 11:47am UTC](https://discourse.aurelia.io/t/facing-a-challenge-porting-angular-1-x-to-aurelia-1/4271/3 "2021-06-23T11:47:44Z")

</div>

No, I haven’t but will do.

---

<div class="post-metadata">

**Author:** ![norgie](https://avatars.discourse-cdn.com/v4/letter/n/57b2e6/32.png) [@norgie](https://discourse.aurelia.io/u/norgie)\
**Post date:** [June 23, 2021, 12:59pm UTC](https://discourse.aurelia.io/t/facing-a-challenge-porting-angular-1-x-to-aurelia-1/4271/4 "2021-06-23T12:59:17Z")

</div>

What can I say other than Aurelia FTW! and thank you @jwx!!!

`containerless` did the trick. Wow!

The only remaining (small) problem now is that when I scroll down the rows bleed through the fixed header.

 ![bilde](https://canada1.discourse-cdn.com/flex027/uploads/aurelia/original/2X/6/6270601a0f1b70c281bfb8fdf660218cf5b6bd3b.png)