How can show list string via html in angularjs - angularjs

I have uib-popover in html when I hover, it'll show as image.
Backend I got list FullName, but when I call it on html. It shows as array.
I want to it just show External 1, Dao Thi Hong Nhung, instead of ["External 1","Dao Thi Hong Nhung"].
How can I do it?

This is not related to AngularJS at all. This is a plain JavaScript problem. Assuming that the array name is testArray, you can do it as follows:
testArray.join(", ")
This will produce a string with all elements of the array concatenated by ,.

Try this.
<!DOCTYPE html>
<html>
<head>
<script>
var response = ["External 1", "Dao Thi Hong Nhung"];
console.log(response.join(", "));
</script>
</head>
</html>

Related

How to insert SSI comments in Gatsby application?

I'm building a Gatsby app and I need to insert a few SSI lines (styled as HTML comments). Example
<!--#set var="section" value="#{section}"-->
<!--#include virtual="/virtual/3.0/script-app.inc"-->
I can't find how to do this.
I need to put these (and other scripts) before the head tag, inside the head tag, at the end of the body tag and directly after it.
I've tried a lot of ways but none of them work. I've tried changing html.js but it just strips the comments out of the outputted code. I also tried working with gatsby-ssr and gatsby-browser but I keep thinking I don't know exactly what to do in those documents.
What I expect the output to be (with the exemplified codes):
<!DOCTYPE html>
<!--#set var="section" value="#{section}"-->
<html>
<head>
<!--#include virtual="/virtual/3.0/script-app.inc"-->
[rest of head code]
</head>
<body>
</html>
What happens: my output page has no comments whatsoever OR has it stringified (as in <!--#include virtual="/virtual/3.0/script-app.inc"-->
I solved this using gatsby-node.js and onPostBuild(). Copying the html/js then adding custom components (like <ssi-code /> then replacing them using replace-in-file:
replace.sync({
files: ['./public/**/*.html', './public/*.html'],
from: /<SSI-before-html>(.*?)<\/SSI-before-html>/g,
to: '<!--#include virtual="/virtual/example.inc"-->',
});

changing box attributes onclick in javascript

trying to create this file that changes an object's attributes (size, color, fade out, and reset) with the click of buttons. Not working right now and trying to figure out what I'm missing .... Any thoughts?
changing a box size
The first thing I notice is the duplication of attribute in your <script> tag and actual javascript in between the <script> and </script>. That's poor coding.
If you need code referenced in the file named 'javascript.js', then it needs to be it's own <script> declaration in HTML:
<script type="text/javascript" src="javascript.js"></script>
and THAT'S IT. THEN follow with any code you want on the page with a new <script> declaration block.
IF you're trying to make the jQuery library available, that can be accomplished with this: (put it in the <head></head> section of your html code.)
<script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>
jQuery is very particular about the selectors you feed it:
1) no prefix symbol means an html tag: $("table") means match any <table> in the HTML
2) a dot prefix symbol means match a class: $(".button1") WILL FIND the elements that you actually have in your code. They are not being found because you didn't prefix with a dot in your selector.
3) a hashtag/pound-sign/number-sign means match an ID: $("#box") will find that box at the beginning of your code.
<script type="text/javascript">
$(function(){
$(".button1").click(function(){
$("#box").css({'height':400,'width':400});
});
$(".button2").click(function(){
$("#box").css('background-color','blue');
});
$(".button3").click(function() {
$("#box").fadeOut();
});
$(".button4").click(function() {
$("#box").show().css({'height':150, 'width':150, 'background-color':'orange'});
});
});
</script>
here's a link to a FUNCTIONING codepen showing that what you're trying to do is possible.

Can I use ng-app as an element?

<!DOCTYPE html>
<html >
<head>
<title>Angular ToDo</title>
<script src="script/angular.js"></script>
<script src="script/script.js"></script>
</head>
<ng-app>
<body>
{{6+4}}
Is this a valid angular syntax? Can I use ng-app as an element ?
No, you have to place it inside an element.
You can find valid examples here: http://www.w3schools.com/angular/ng_ng-app.asp
No. The documentation specifies ng-app is restricted explicitly to attributes.
<ANY
ng-app="angular.Module"
[ng-strict-di="boolean"]>
...
</ANY>
In Angular's documentation, ANY refers to any element that is either defined in HTML5 or defined by your own element directive.
If you want it in a specific spot, it's been conventional to place it within the container of that portion of your application, whether that's a div or some other element.
I don't think you can do this nor am I sure what you're trying to accomplish. If it is to use more than one Angular module in the same HTML page here is a post that should help.
http://www.simplygoodcode.com/2014/04/angularjs-getting-around-ngapp-limitations-with-ngmodule/

How to get an empty (i.e. no-value) attribute in an HTML element in coffeekup's output?

I'm trying to get started with AngularJS using coffeescript and coffeekup.
AngularJS is capable of auto-bootstrapping itself when it detects the ng-app attribute on any HTML element. According to the docs, it should be placed on the <html> or <body> element. However, it will try to load any attribute value, if given, as the application root module.
When placed on the <html> element for example, the HTML should be
<html ng-app>
This output does not seem to be achievable using coffeekup. I tried the following things:
html 'ng-app': '' #prints <html></html>
html '': 'ng-app' #prints <html ="ng-app"></html>
html 'ng-app': ' ' #prints <html ng-app=" "></html> (still not what is wanted)
To clarify: What I do not want is the following:
html 'ng-app': 'ng-app' #prints <html ng-app="ng-app"></html>
since this causes AngularJS to look for a non-existent root module called ng-app.
Currently, I'm defining an empty root module as a workaround, but I still don't think that this is something coffeekup is not capable of.

Writing html code dynamically to an aspx file

I have HTML stored in a Microsoft SQL Server column, and I also have an blank .aspx file called myreport.aspx. My problem now is, when I retrieve the contents of the column from the database, I want to be able to write it to the empty myreport.aspx file and use Response.Redirect() to call the myreport.aspx and display it.
The contents of the column looks like this:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<h1>Welcome Aboard!</h1>
</body>
</html>
And also replace the contents with a new one whenever the page is being called.
I need help, thank you in advance, seniors!

Resources