We Keep Coding

How can I use a string in image `alt` tag without encode by AngularJs

If I have this AngularJs code:
<div class="myStyle">
TITLE:
{{product.title}}
</div>
I want show title without encode. so I know it's one solution:
<div class="myStyle">
TITLE:
<span ng-bind-html="product.title"></span>
</div>
But I don't happy about extra <span> code!
Also if I have this code:
<img src="img.jpg" alt="{{product.title}}">
I can not use extra span, Now how can I show title in alt tag of image without encode?!

I am assuming that since you use ng-bind-html that product.title is html string , not text
You could create a custom filter that returns text from html string
app.filter('htmlToText', function(){
return function(html){
return angular.element('<div>').append(html || '').text();
};
});
View
<img src="img.jpg" alt="{{product.title | htmlToText}}">

For showing product.title in div, if you don't like the extra span, you might try:
<div class="myStyle" ng-bind="product.title"></div>
where in your javascript code, you can add a prefix: "Title: " to product.title. (Although i don't feel having an extra span is bad)
Another side note, I see you are using ng-bind-html. Is "product.title" really html? If it contain some styles, maybe you can revise your "myStyle" to control the style. Let data be data.
For the image one, you probably don't need to worry about the {{ }}.
I am guessing the reason you don't like {{ }} is they may show briefly before angular can render the template with the data. However, if you put them in , the browser will not show content inside of alt unless your image is not available (If the image is really not available, you may consider revisiting your codes to make sure it is available, or to display a default image)

Cant get a message text to render an emoji rather than the HTML text

I am using a cool little AngularJS filter for emoji characters located at: http://dev.venntro.com/angular-emoji-filter/ and this is my code I have so far.
<p class="chatmessage plain ng-binding" ng-repeat="message in messages track by $index" ng-model="message" ng-bind-html-unsafe="message | emoji">
<b>{{message.Author}}:</b>{{message.Message|emoji}}
</p>
It gives me the following output:
User123: <i class='emoji emoji_smiley'>smiley</i>
obviously, I'd rather have the emoji icon, but that is what gets output to the page. This is almost a win for me even at this stage as I had to figure out how to add all of the appropriate references to get the message filter to work and get this far. Now I am trying to come up with a way to make the "message.Message" render the HTML rather than just giving me the HTML code itself.
I am wondering if there is a function that I can wrap around that to force it to render this emoji rather than the HTML?
Thank you for any help
Sincerely,
New kid to AngularJS

I think you need to try with below ng-repeat code :
<p class="chatmessage plain" ng-repeat="message in messages track by $index">
<b>{{message.Author}}:</b><p ng-bind-html-unsafe="message.Message | emoji"></p>
</p>

Html not decoded in span is it Knockout.js or Jquery mobile doing things?

I am trying to display warning message that has special character ' (') in span as text on a page that is using Jquery Mobile UI and knockout.js. Text is returned by javascript function and is encoded on .NET side. Problem is it gets interpreted as literal while same exact html in JSfiddle is interpreted like '.
Is it Knockout.js or JQuery Mobile again or am I missing something here?
I have printed out function that returns the value in Chrome Dev tools in screenshot below, and you can see html too.

The problem is that the string you want to append is an HTML entity and it won't be rendered if you append it as text
Thanks to #Origineil for providing the fiddle with knockout that proves the same thing.
<span data-bind="text: data"></span><br/> <!-- ' -->
<span data-bind="html: data"></span> <!-- ' -->
And script
var vm = {
data: ko.observable('3 Optional Activities aren't Done')
};
ko.applyBindings(vm)

Replace string in value from an JavaScript object

I have a JSON file which contains multiple <br /> tags. The file is parsed using JSON.parse(json) into an object. Because I bind the data with AngularJS and ng-repeat I don't want that the strings have any HTML tags and replace it with a new line \n. How can I replace all tags? It seems to me that replace() only works with strings.
Thanks for your help!
JSON example
{
"title": "Title",
"description": "This<br />is<br />a<br />description."
}
JavaScript
var retrievedObject = JSON.parse(json);
$scope.data = retrievedObject;
HTML
<div ng-repeat="item in data">
{{item.description}}
{{item.description}}
</div>

You could just replace it before you parse the string
var retrievedObject = JSON.parse(json.replace(/\<br \/\>/g, ''));
A better option would be to parse the strings as HTML and extract the text without the tags, not using a regex before you insert them in the DOM

There's two ways to do what you're looking for. One with css where you replace the br's with
\n and then in your css file give the element the white-space property of pre-wrap.
The other is angularish. Take a read of data-ng-bind-html. You'd be able to actualy have the br's outputted. https://docs.angularjs.org/api/ng/directive/ngBindHtml You would have to run it through a filter of $sce so that it's trusted but your code would be as simple as:
<div ng-repeat="item in data">
<span data-ng-bind-html="item.description | trusted"></span>
<span data-ng-bind-html="item.description | trusted"></span>
</div>
your filter for trusted would be this:
.filter("trusted", function($sce){
return function(input){
return $sce.trustAsHtml(input);
}
});

ngBindHtml will let you keep keep the <br>s and render newlines in your HTML. It will automatically sanitize your input using ngSanitize to strip out any tags are aren't in its whitelist (you have to bring ngSanitize in as a dependency)...
var app = angular.module("app", ["ngSanitize"]);
The view is as simple as...
<div ng-bind-html="item.description"></div>
JsBin
You can also use $sce.trustAsHtml() to tell ngBindHtml to blindly trust the HTML without sanitizing, but only do that if you can completely trust its content (i.e., not for things like user submitted comments, etc).

Formating JSON object output in AngularJS

I have AngularJS web app, which is capable of sending different http methods to our Restful WS. Each request has a preview, where all of it's properties are listed and can be changed in place. Everything works fine except the formating for inputing JSON. It looks like this:
And I would like it to look like this, except that JSON text was displayed like in picture 1:
Shortly, I need that the left side was as in 1 pic, and the right side - as in the second pic.
Here's piece of code, which is responsible for generating input for JSON:
<div ng-show="field.restResourceName != null">
<p ng-show={{field.isRequired}}>{{field.name}}*: </p>
<p ng-show={{!field.isRequired}}>{{field.name}}: </p>
<accordion id="entityField" close-others="oneAtATime">
<accordion-group heading={{field.name}} is-open="false">
<p>JSON:</p>
<textarea ng-change="getCreateEntityAsText()" ng-model="createEntityResource[field.name]"></textarea>
</accordion-group>
</accordion>
</div>
And here's the one, responsible for showing the output:
<div class="preview">
<p>Preview: </p>
<textarea class="form-control" ng-model="createEntityTextAreaModel"></textarea>
</div>
AngularJS controller functions, which parse JSON into model and vice versa:
//CREATE ENTITY JSON PARSE
$scope.getCreateEntityAsText = function () {
$scope.createEntityTextAreaModel = JSON.stringify($scope.createEntityResource, null, " ");
};
$scope.$watch('createEntityTextAreaModel', function () {
applyParseValues($scope.createEntityTextAreaModel, $scope.createEntityResource);
});
applyParseValues = function(textAreaModel, entityModel){
if($rootScope.isNotEmptyString(textAreaModel)) {
angular.copy(JSON.parse(textAreaModel), entityModel);
} else {
angular.copy({}, entityModel);
}
}
Any ideas how this can be achieved? Every useful answer is highly appreciated and evaluated.
Thank you.

It looks like you're mostly having a styling issue, which is addressed in this question:
JSON formatter lib
Otherwise, Angular comes with a built-in filter for JSON, which can be used in a view like this:
<p>{{someObject | json }}</p>
Links:
https://docs.angularjs.org/api/ng/filter/json
https://docs.angularjs.org/api/ng/filter/json