CODEWITHSUNDEEP
javaangularjsvariablesspring-bootthymeleaf
jrmullen
jrmullen

Reputation: 346

How to combine AngularJS and Thymeleaf templates

I am converting a web page currently using Thymeleaf to instead use AngularJS.

I want to convert the follow block containing Thymeleaf 

<form th:action="@{?deleteLog}" th:object="${log}" method="post" class="in-line">
    <input type="hidden" th:value="${log.vid_id}" name="vid_id" />
    <input type="hidden" th:value="${log.id}" name="id" />
    <button type="submit" class="btn btn-danger">Delete</button>
</form>

These th:value variables are being passed to a @PostMapping method in my controller class that then uses those variables to delete an entry from my database.

How can I achieve this using AngularJS? Taking the same approach I have

<form th:action="@{?deleteLog}" method="post" class="in-line">
    <input type="hidden" th:value="{{x.vid_id}}" name="vid_id" />
    <input type="hidden" th:value="{{x.id}}" name="id" />
    <input type="button" value="Remove" class="btn btn-danger" ng-click="removeRow(tableList.id)" />
</form>

The removeRow() function successfully removes the row from the table in the UI, I just need to send the {{x.vid_id}} and {{x.id}} values to the method in my controller class.

I am obviously not using correct syntax because I am getting parsing errors for the th:value="{{x.id}}" thymeleaf variables when I try to use Angular. I've also tried th:value="${{x.id}}"' and th:value="${{{x.id}}}".

I haven't been able to find anything online regarding passing an Angular variable. Is this even possible?

Upvotes: 0

Views: 1467

Answers (1)

luboskrnac
luboskrnac

Reputation: 24571

You shouldn't mix AngularJS (SPA framework for client-side HTML templating) with Thymeleaf (library for server side HTML templating). You should choose to do templating on server or client and stick with it.

Combining these two doesn't make sense at all.

Upvotes: 1

Related Questions