Trying to create a template for inline editing with Angular, I found this useful tutorial:
Here is my code:
<table class="table">
<tbody>
<tr class="table-row" ng-repeat="admin in admins" ng-include="getTemplate(admin)">
<script type="text/ng-template" id="display">
<td class="table-img">
<img src="images/in.jpg" alt="" />
</td>
<td class="table-text">
<h6>{{admin.firstname}} {{admin.lastname}}</h6>
<p>{{admin.email}}</p>
<p>{{admin.phone}}</p>
</td>
<td>
<span class="fam">{{admin.dept_name}}</span>
</td>
<td class="march">
<button class="btn-transparent btn" ng-click="editAdmin(admin)"><i class="fa fa-edit fa-2x"></i></button>
</td>
<td>
<button class="btn-transparent btn"><i class="fa fa-remove fa-2x"></i></button>
</td>
</script>
<script type="text/ng-template" id="edit">
</script>
</tr>
</tbody>
</table>
AngularJS code:
$scope.getTemplate = function (admin) {
if (admin.id === $scope.selected.id){
$scope.template = 'edit';
}
else{
$scope.template = 'display';
}
return $scope.template;
};
$scope.editAdmin = function (admin) {
$scope.selected = angular.copy(admin);
};
However, when running the code, it throws a 404 error in the console:
www.ip-address/dashboard/principal/display
The script ID "display" seems to be causing this issue.
Why is it trying to access the "display" ID in the URL?
The admins scope variable contains data, but it isn't accessed when written under the script.
Any help would be appreciated.