We Keep Coding

Value from org.springframework.ui.Model to jQuery

I'm trying to pass reCaptcha sitekey from my Spring MVC to thymeleaf template. I have an idea to reach this using jQuery $("#reCaptcha").attr("data-sitekey", reCaptchaSiteKey);, but can't find out how to get this value in jQuery.
Controller code model.addAttribute("reCaptchaSiteKey", RECAPTCHA_SITE_KEY); Would appreciate your help to solve this problem in this way or any other

There are quite a few ways to go about this. If you just want to use javascript, you can do javascript inlining:
http://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#javascript-inlining
<script th:inline="javascript">
var key = [[${reCaptchaSiteKey}]];
$("#reCaptcha").attr("data-sitekey", key);
</script>
You could also use thymeleaf to directly output the #reCaptcha div
<div class="g-recaptcha" th:attr="data-sitekey=${reCaptchaSiteKey}"></div>

Render html tag from string

I have some values as amount like 1000, 2000, <b>3000</b>, <4000>, <b>5000</b> inside JSON as an API response. I want to render this response inside a table. So I tried ng-bind-html. BUT it is showing only the value which are having tags like 3000,5000. I want to show all values , 1000,2000,4000 as a plain string and 3000,5000 in BOLD/or any other HTML tag.
angular.forEach($scope.arr2.test,function(item)
$scope.res=$sce.trustAsHtml(item.amount);
return $scope.res;
});
On HTML side, I have something like this
<td id="price" class="edit" ng-repeat="pro in d.procedure" ng-bind-html="valueCheck(d._id,pro._id,hos._id)"></td>

You can use ng-bind-html and ng-bind-html-unsafe for this. But please be mindful of the security concerns here.
You can find more details here
Do make sure you sanitize your strings, to prevent security vulnerabilities

First of all you need to download the ng-sanitize js
https://docs.angularjs.org/api/ngSanitize
and then inject ng-sanitize to angular module.
then you can use ng-bind-html and ng-bind-html-unsafe

you can use ng-sanitize module for the same - see here
var app = angular.module("myApp", ['ngSanitize']);

Get element content in angular (alternative to .html() in jQuery)

I've got this element:
<span id="tag_span"> {{ selectedSection }} </span>
And I want to get its content from controller, which is {{ selectedSection }}. I can get the element like this:
angular.element('#tag_span');
but don't know how to get what inside of it. Any ideas?
P.S. document.getElementById won't work in the case so there's no need to suggest it.
EDIT: No jQuery allowed.

You get the value by $scope.selectedSection from your controller.
If you need the get html inside the span element use
angular.element($('#tag_span')).html();
You need to reference the jquery before angular js like below.
<script type="text/javascript" src="../../Scripts/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="../../Scripts/angular/angular.js"></script>

Your all html elements are properties of $scope, so you could easily access the content via $scope.selectedSection . Your controller function definition must have a scope injection like function controller($scope), that is all.

Why is angular not parsing my template?

I have an angular directive where I'm compiling a template via the templateCache after the directive has loaded. For some reason, my {{}} is being output in the template instead of being parsed and replaced with their respective values. Does anybody know why?
The template looks like this
<script type="text/ng-template" id="input">
<input class="cirque-input" ng-model="model" value="{{model}}" type="{{fieldtype}}" ng-change="updateForm()" />
</script>
and in my directives link function, I get the template and display it with
var tmpUrl=$templateCache.get(scope.template);
elm.html(tmpUrl);
$compile(elm.contents())(scope);
clearly I'm doing something wrong here, but I can't figure out what.

Compile first and then replace element with new html:
var tmpUrl=$templateCache.get(scope.template);
var compiledContents = $compile(elm.contents())(scope);
// here i'm not sure about the html method
elm.html(compiledContents);
// maybe you have to use
// elm.replaceWith(compiledContents[0])

I had a similar problem but I use replace... you may want to try:
var tmpUrl=$angular.element($templateCache.get(scope.template));
elm.append(tmpUrl);
$compile(tmpUrl)(scope);
or
var tmpUrl=$angular.element($templateCache.get(scope.template));
elm.append(tmpUrl);
$compile(elm)(scope);

AngularJS - Can you reference a repeater variable in a block of javascript?

Simply put, I'm using AngularJS trying to do something like this:
<ul>
<li ng-repeat="thing in things">
<a id="mybutton" href="link{{thing.Id}}">Click</a>
<script type="text/javascript">
$("#mybutton").click(function()
{
alert("Id: " + {{thing.Id}});
});
</script>
</li>
</ul>
Both that, and alert("Id: " + thing.Id); yield errors (unespected token '{' and 'thing' is not defined, respectively). Is there a way that I can access thing.Id from a block of javascript within the repeater's scope?
To add a practical reason, I'd like to build and redirect to a URL using that value and a few other things in javascript (where I have access to jquery).

Mike, using angular expressions ({{thing.id}}) in the tag won't work since angular.js is not a text-based template system but rather uses DOM as its templates. Here is more on this topic: http://docs.angularjs.org/guide/compiler
Now, coming back to your question: what you are trying to do can be done very easily in angular.js without using jQuery, here is a working jsFiddle: http://jsfiddle.net/pkozlowski_opensource/n6UfC/
The trick is to use a ng-click on your href:
<a ng-click="click(thing.id)">Click</a>
and then a click-handler function in your controller:
$scope.click = function(thingId) {
alert("Id: " + thingId);
//$location.path('/some/path/'+thingId);
}
In the controller's function you can use jQuery instructions but you would be better off using angular's $location service: http://docs.angularjs.org/api/ng.$location

I would store it to the element like "data-id={{thing.id}}"
Then from javascript read the ID back using the data attribute.