Currently, I am in the process of developing a dynamic table that may have an unknown number of columns and rows. My goal is to incorporate inline editing with inline templates using ng-include.
The first issue at hand:
I am faced with the challenge of utilizing ng-include at the < tr > level while including scripts within < td > elements. Is this even achievable? Although calling ng-include at the < td > level is an option, it may lead to significant overhead...
The second challenge:
How can I utilize the same ng-include to include edit_btn/display_btn templates outside of ng-repeat as the final cells?
<tr ng-repeat="row in model.array" ng-include="model.isEditMode(row)">
<td ng-repeat="(k, v) in row" ng-show="model.header[$index].display == true" class="text-center" >
<script type="text/ng-template" id="edit">
<div ng-if="model.header[$index].isDisabled == true">
<div ng-if="model.header[$index].type == 'datetime'">
<input type="text" class="form-control" ng-model="model.dateTime"/>
</div>
<div ng-if="model.header[$index].type == 'string'">
<input type="text" class="form-control" ng-model="v"/>
</div>
</div>
<div ng-if="model.header[$index].isDisabled == false">
<div ng-if="model.header[$index].type == 'datetime'">
<input type="text" class="form-control" ng-model="model.dateTime" />
</div>
<div ng-if="model.header[$index].type == 'string'">
<input type="text" class="form-control" ng-model="v" />
</div>
</div>
</script>
<script type="text/ng-template" id="display">
<div ng-if="model.header[$index].isDisabled == true">
<div ng-if="model.header[$index].type == 'datetime'">
{{model.dateTime}}
</div>
<div ng-if="model.header[$index].type == 'string'">
{{v}}
</div>
</div>
<div ng-if="model.header[$index].isDisabled == false">
<div ng-if="model.header[$index].type == 'datetime'">
{{model.dateTime}}
</div>
<div ng-if="model.header[$index].type == 'string'">
{{v}}
</div>
</div>
</script>
</td>
<script type="text/ng-template" id="edit_btn">
<td>
<button type="button" class="btn btn-primary" ng-click="model.save(entry)">save</button>
</td>
</script>
<script type="text/ng-template" id="display_btn">
<td>
<button type="button" class="btn btn-primary" ng-click="model.edit(entry)">edit</button>
</td>
</script>
</tr>