I have a site showing a list of comments and the comments can be liked by clicking a button.
The site is written using angular and the list of comments are fetched from a node back end and rendered using ng-repeat of Angular.
To record a like I need to pass some information related to the comment to the node endpoint via AJAX.
The problem is that I don't wanna store any information related to the comment on the DOM. And I did not get how I can use jQuery.data here since I am 'ng-repeat'ing to render the comments.
Please suggest some alternatives..
Here is how the comments are rendered
<div class="stickyNotes" ng-repeat="comment in commentList1">
<p>
{{comment.commentContent}}
</p>
<div>
<img src="../resources/images/thumb.png" class="upvoteImage" />
</div>
</div>
You can use $index, and pass it to your controller method onClick. Then you can access the exact comment $scope.commentList1[index] on your controller, and do what you what with it.
you can learn about $index here:
https://thinkster.io/egghead/index-event-log
Related
So far I've read https://angular.io/docs/ts/latest/guide/router.html#!#router-link and https://auth0.com/blog/2015/05/14/creating-your-first-real-world-angular-2-app-from-authentication-to-calling-an-api-and-everything-in-between/
but they're a bit too dense for my level and I'm getting lost easily.
So I thought about asking if there is a simpler way of doing what I want, or if there's another way of looking at the problem.
Currently I have "half" a webpage built
http://plnkr.co/edit/BcyPlw?p=preview
, in angular2, in which I use js and ts functions to get some D3 and some maps working:
<div layout="row" layout-wrap flex>
<div flex="50" *ngFor="#item of items">
<md-checkbox [checked]="exists(item, selected)" (click)="toggle(item, selected)">
{{ item }} <span *ngIf="exists(item, selected)">selected</span>
</md-checkbox>
</div>
</div>
The idea now is to add URIs to events such as: if you click calendar, trigger an event so that I can return which cars were used in a given date, or which sessions does a car have in a given date, since I have created a webservice in java that is waiting to get something like:
#GET
#Path("/getData/{car}/{session}")
So the uri I am working with in the webservice (which I tested and works, and I want to connect with what I have in angular2 via tomcat) would be something like:
http://localhost:8080/Project/rest/projectName/getData/55/99
So I believe that is done with routing but 1º I haven't found examples that go deeper than /path (so, not /path/getData/data/data , in this case) , and 2º I am not really getting how to use what can be seen in the official tutorial { path: 'hero/:id', component: HeroDetailComponent }];
It is quite confusing and as of right now I do not feel I have the level to do all those steps (and there are many that I don't need, either), it all seems too complex
I'm trying to create new ngControllers on the fly, is this possible? I'm not writing it into the template with a ngRepeat or anything, since the user might never create an instance of a certain ngController.
Here's an example of my current template:
<div ng-controller="ViewUsers">
<div class="viewUsersList">
<table>
<tr class="userRow" ng-click="viewUser(user.user_id)" ng-repeat="user in users">
<td>{{user.first_name}} {{user.last_name}}
<br />{{user.phone}}
</td>
</tr>
</table>
</div>
</div>
So far it works great. When the user clicks a .userRow it calls viewUser(ID). The problem is here:
I want to create a new block of code like this:
<div ng-controller="UserDetail">
{{first_name}}
</div>
And append this to the DOM.
So if they click on Bobby and Sally, two UserDetail controller objects would be added to the DOM and work accordingly. (Ideally, I'd like to pass in the data-bound user model, but that's for later).
I tried a ghetto version in JSBin, but I'd rather not use JQuery if possible:
http://jsbin.com/EdOteTav/2/edit
Can anyone shine some light on this? Thanks in advance
I would change the code little bit and use directive instead of controller. See this simple and quick example in jsfiddle.
The directive would handle the click events and display whatever you want to display on the DOM. You can get the full user object from scope.user inside the directive.
I am a super beginner to EE and was literally thrust into managing my company's website that is built in EE without training. I'm not a programmer, I'm a designer, so it's been taking me awhile to plug through this. So I might need some dumbed down language :)
I want to create a page that has some Javascript on it. Do I need to create a new template JUST so I can put some javascript on it? And how do I communicate to EE that I want the page I created to go with that template?
I duplicated the page/index template and renamed it to clinician-map (the same name of the page I created in the publisher). EE didn't like that and the page subsequently broke. All I want to do is insert one javascript item, this seems way too inefficient for just one page. Help??
(using EE 1.6.8)
Here is my code from clinician-map template.
{assign_variable:my_weblog="page"}
{assign_variable:my_template_group="page"}
{embed="embeds/html_head" url_title="{segment_2}"}
{embed="embeds/html_styles"}
{embed="embeds/html_scripts"}
<?php include_once("analyticstracking.php") ?>
</head>
{exp:weblog:entries weblog="{my_weblog}" disable="categories|member_data|pagination|trackbacks" limit="1" sort="asc" }
<body class="{url_title}">
{/exp:weblog:entries}
<div id="wrapper">
{embed="embeds/html_headerPlusLeftNav"}
<div id="content">
<div id="contentMain">
{exp:weblog:entries weblog="{my_weblog}" disable="categories|member_data|pagination|trackbacks" limit="1" sort="asc"}
<h2>{title}</h2>
{page_body}
{/exp:weblog:entries}
<!--contactforminfo -->
{exp:weblog:entries weblog="{my_weblog}" disable="categories|member_data|pagination|trackbacks"}
{related_entries id="playa_contentcalloutitems"}
<div class="callout">
<h3>{title}</h3>
{callout_summary}
</div>
{/related_entries}
{/exp:weblog:entries}
{exp:weblog:entries weblog="{my_weblog}" disable="categories|member_data|pagination|trackbacks"}
{related_entries id="playa_contentfeatureditems"}
<div class="featuredContent">
<h3>{title}</h3>
{exp:word_limit total="50"}
{contentfeatured_summary}
{/exp:word_limit}{if contentfeatured_body!=""}<p><a href='{url_title_path='content-featured/'}' class='more'>Read More</a></p>{/if}
</div>
{/related_entries}
{/exp:weblog:entries}
</div>
{exp:weblog:entries weblog="{my_weblog}" disable="categories|member_data|pagination|trackbacks"}
<div id="contentSub">{related_entries id="playa_contentsubitems"}<div class="item {contentsub_bgcolor}">
{if contentsub_contenttype=="Text or Picture with Text"}
<h3>{title}</h3>
{exp:word_limit total="50"}
{contentsub_summary}
{/exp:word_limit}{if contentsub_body!=""}<p><a href='{url_title_path='content-sub/'}' class='more'>Read More</a></p>{/if}
{if:else}
<h3 class="imgHeader">{title}</h3>
{exp:html_strip convert="y" convert_back="none" keep="a,img"}
{contentsub_summary}
{/exp:html_strip}
{/if}
</div>{/related_entries}
{/exp:weblog:entries}
{embed="embeds/html_mailingListSignup"}
</div>
</div>
{embed="embeds/html_footer"}
</div>
</body>
</html>
At glance I can see a couple things that might be confounding you...
You started with a template called 'index' in the 'page' template group.
Looks like the 'page' template you are starting from is meant to display a single entry from the 'page' weblog.
So a request url might look something like this:
http://example.com/page/some_url_title
where 'some_url_title' is the 'url_title' value one of the entries in your 'page' weblog.
Now you have gone and duplicated the index template and called this new template 'clinician-map'.
So you would call an entry through this template at:
http://example.com/page/clinician-map/some_url_title
Now, notice that the first url had 2 segments, while the second had 3 segments?
That's not normally a big deal but the fellow who designed the index template did something that makes it problematic. He is taking the value of segment_2 and passing it through an embed.
So in the first example (index) we are passing the dynamic value "some_url_tile" while in the second example (clinician-map) we are passing "clinician-map". If the embedded template 'html_head' is expecting to get a valid url_title but instead gets the string 'clinician-map' you are likely going to get unexpected results.
Also I don't think we know enough about what you are trying to do to decide if creating a new template is the right approach here. It may be that what you actually need is a new weblog entry or perhaps just a dynamic value inside your existing template.
If it did turn out that a new template is the best approach you could fix the problem I have described by simply replacing segment_2 with segment_3, but I am by no means certain that that is the way you want to go.
I want to create a page that has some Javascript on it. Do I need to
create a new template JUST so I can put some javascript on it?
More specifics would be needed in order to give a solid recommendation but in almost every case, I recommend keeping JavaScript grouped together either in the <head></head> or ideally right before the closing </body> tag if you can get away with it.
Looking at your template code, it appears all the JavaScript is stored in the embeds/html_scripts page. I would add the JavaScript you need to that template. If you only want the JavaScript to appear for certain pages only, I would make use of a conditional (which I'll outline at the end of my answer).
And how do I communicate to EE that I want the page I created to go
with that template?
ExpressionEngine URLs (by default) are assembled as follows:
http://website.com/group/template/url_title
Therefore if you have a page with a url_title of "contact-us", and you wanted that page to use a template in site/pages, you could tell your page to use that template like so:
http://website.com/site/pages/contact-us
That url is obviously fine and dandy for blog articles and such, but it's not that pretty; so ExpressionEngine also enables you to construct "page" based navigation which creates navigation tree based url structures, such as:
http://website.com/contact-us
There are a few third party modules that make it easy to build page navigation such as:
devot-ee.com/add-ons/structure
Using Structure, you specify the default template for each channel and can override the template for each page as well.
I duplicated the page/index template and renamed it to clinician-map
(the same name of the page I created in the publisher). EE didn't like
that and the page subsequently broke. All I want to do is insert one
javascript item, this seems way too inefficient for just one page.
Help??
(using EE 1.6.8) Here is my code from clinician-map template.
There are a number of things I would do different in regards to the template code you provided; however, as a quick fix here's how I would add the one line of JavaScript,
1) Open the embeds/html_scripts template and add the following logic:
{if segment_2 == "my_page_url_title"}
<!-- javascript here -->
{/if}
Note: Here's how segments are determined:
http://website.com/segment_1/segment_2/segment_3
Okay. I ended up just creating a new webblog and new template group and finally it seems like it's working. My javascript is not, but I can figure that out.
Thank you so much for your patience with helping me!
I'm using AngularJS with a third party service that generates html responses. I want to use ng-repeat to render the HTML responses as a list, however Angular renders it as text.
Is it possible to use ng-repeat to render HTML property?
I've created this jsFiddle to demonstrate my issue.
http://jsfiddle.net/DrtNc/1/
I think using ng-bind-html-unsafe will get you what you need.
<div ng:repeat="item in items" ng-bind-html-unsafe="item.html"></div>
Here's a working fiddle: http://jsfiddle.net/nfreitas/aHfAp/
Documentation for the directive can be found here: http://docs.angularjs.org/api/ng.directive:ngBindHtmlUnsafe
The way I achieved this is by ng-bind-html inside the ng-repeat;
<div ng-repeat="comment in comments">
<div ng-bind-html="comment.content"></div>
</div>
Hope this helps someone!
item.html will always be interpreted as text. you have to convert it to html explicitly. click here
I have added a render function which will convert each string to html.
I'm trying implement a way to recursively template using jsRender. The issue is, my data object has a unary self-referencing heirarchy which requires recursive looping to show all of the attributes. The example here is a forum post which can contain any number of reply posts. Each reply post can contain any number of children posts and so on. I have the following code working except for the recursion part. I could only find one remote reference to this via the Googles, so here is what I have thus far:
<script id="forumPostsTemplate" type="text/x-jsrender">
<article class="forumPost">
<header class="forumPostHeader">{{:PostSubject}}
<div class="info">By: Some Person, {{:CreatedDate}} Flag as innapropriate </div>
</header>
<div class="content">
{{:PostContent}}
{{for Replies}}
{{:Replies tmpl="#forumPostsTemplate"}}
{{/for}}
</div>
</article>
</script>
Does anyone have any experience with this sort of functionality? I am currently running the most recent version of jsRender if that helps.
Per this example for jsRender, does it work to call your template like this instead?
https://github.com/BorisMoore/jsrender/blob/master/demos/step-by-step/06_template-composition.html
{{for Replies tmpl="#forumPostsTemplate"/}}
These three different versions of a tree tag control illustrate exactly that kind of recursion:
http://www.jsviews.com/#samples/tag-controls/tree