We Keep Coding

How to write Javascript inside of Angular Binding?

My code consists of img tag which fetches image dynamically.
<img src="{{'http://example.com/'+category.name+'.png'}}">
What I want to do is write Javascript code to replace & from the category name i.e.
<img src="{{'http://example.com/'+category.name.replace("&", "AND")+'.png'}}">
But Angular gives me the error when I write JS inside of the src binding. Please help me to fix this!

You are using double quotos within double quotos try this -
<img src="{{'http://example.com/'+ category.name.replace('&', 'AND')+'.png'}}" />
Either you can bind this way too
<img [src]="'http://example.com/'+name.replace('&', 'AND')+'.png'" />

You can do something like this.
<img [src]="createUrl()">
in the .ts file.
public createUrl(): string {
return `http://example.com/${category.name.replace("&", "AND")}.png`;
}

Escape the double quotes properly.
<img src="{{'http://example.com/'+category.name.replace(\"&\", \"AND\")+'.png'}}">

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)

Alternative binding syntax in Vue.js

Question
I want to know if there is an alternative syntax to output data in Vue.js, instead of the curly braces, like the ng-bind Angular directive.
Reading the docs, it seems that Vue.js accepts only tag properties with the v-bind directive, but I want it to work with the inner html too.
Context
I want to output data using PHP and, once the page is loaded, manage it with Vue. Imagine the next situation:
We want this output:
<div>Hello</div>
First, we output the data with php
<div><?php echo $hello_string ?></div>
After that, we want to be able to change the content with Vue. The current syntax is;
<div>{{ hello_string }}</div>
We can't mix the two syntaxes, so I need something like this:
&lt!--Ideal syntax for mixing vue and php-->
<div v-bind:innerhtml="hello_string"><?php echo $hello_string ?></div>
Thank you for your help.

You could use the v-text directive:
<div v-text="hello_string"></div>
<!-- same as -->
<div>{{ hello_string }}</div>
or the v-html:
<div v-html="html"></div>
<!-- same as -->
<div>{{{ html }}}</div>

Vue.component({
el:'#app',
data:function(){
return {
hello_string:"<?php echo json_encode($hello_string) ?>"
};
}
});
Then in HTML:
<div id="app><div>{{ hello_string }}</div></div>
Basically you need to use PHP to fill your javascript variables, whether you do it through AJAX or just printing out the variables like above is up to you. You probably need to encode it to JSON or at least make sure quotes are escaped. On the front end, let Vuejs manage the view rather than printing directly into it with PHP.

Use angularjs ng repeat $index to name model

I dont know anything about Angular but I need to put the $index number inside the ng-model and the src path (_XXX) but I dont know how to do it. I only need the $index number, Could you help me with this?
I tried to put {{$index}} but does not work...
<div ng-repeat='opt in el.options_final' for='radio{{$index}}'>
<div class='img-radio'>
<input id='image_location_{{$index}}' ng-model='el.image_XXX' />
<img src='{{el.image_XXX}'>
</div>
</div>
Thank you.

You would need to use bracket notation for ng-model, ng-model="el['image_' + $index]" and similarly use ng-src and append index, ng-src="{{el['image_' + $index]}}"
<input id='image_location_{{$index}}' ng-model="el['image_' + $index]" />
<img ng-src="{{el['image_' + $index}}">
Why ng-src?
Using Angular markup like {{hash}} in a src attribute doesn't work right: The browser will fetch from the URL with the literal text {{hash}} until Angular replaces the expression inside {{hash}}. The ngSrc directive solves this problem.

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).