is there a possibility to code a loop in HTML to nest div elements in that way(the child elements are the interesting ones):
<div class="parent">
<div class="child">
<div class="child">
<div class="child">...
I don't know the main language of your project, but a simple solution that comes to mi mind and think it works is doing something like this:
<div class="parent">
<% simple for statement in your main languaje %>
<div class="child">
<% end %>
<% same simple for statement in your main languaje %>
</div>
<% end %>
</div>
Related
I'm in a condition where I've got a JSON file with all my data.
Those data are generating an HTML component of my code.
The issue is that, occasionally, the component code needs to change: in particular, a <div> has to become a <a>, due to the presence of a link.
The end result should be like this:
<div class="container">
<div class="a b c">
content
</div>
<div class="a b c">
content
</div>
<a href="#" class="a b c">
content
</div>
</div>
my data structure is something like this:
'element1':{
'properties' = 'properties',
'isLink' = 'true'
},
'element2':{
'properties' = 'properties',
'isLink' = 'false'
},
I am printing the <div> or the <a> with a loop of Angular, but can't find a clean way to tell the code something like "if 'isLink' = 'true' print an <a>, else print a <div>".
The closest solution I've found is this one below, which prints a useless span that breaks all the CSS:
<div class="container>
<span ng-repeat="element in row.element">
<div ng-if="element.isLink == false">
content
</div>
<a ng-if="element.isLink == true">
content
</a>
</span>
</div>
Has anyone a solution to make it cleaner?
Thank you all.
You can do that by using ng-repeat-start and ng-repeat-end:
<div class="container">
<div ng-repeat-start="item in array" ng-if="!item.isLink">...</div>
<a ng-repeat-end ng-if="item.isLink" href="#">...</a>
</div>
I would replace the parent span with a div element because divs have
display: block;
by default, while spans have
display: inline;
and probably that is why your css is breaking. Your html/angularjs code seems perfectly fine to me. Try to solve your css problem instead.
I am trying to set a variable to template with if in the HTML. The issue is that I can't see my template and don't have any errors from the logs. I can see that elements are in the HTML but still can't see it.
The template is:
<div class="list-group">
<div id="table_template">
<div id ="table"></div>
<script type="text/template" id="nextPage">
<% if (nextLink != "") { %>
<nav><ul class="pager"><li><a href="#" id="next_page" >Next</a></li> </ul> </nav>
<%}%>
</script>
</div>
</div>
</div>
and the view:
var template = _.template($('#nextPage').html());
view.$el.find('#nextPage').html(template(listSongs));
Update: Looks like I am unable to see it if I have script tag.
A script tag is used so that the browser does NOT render that piece into the whole DOM. You did that assuming that the script tag will print into the view but it won't. You will need to inject it into the view. Try this:
<div class="list-group">
<div id="table_template">
<div id ="table"></div><div id="nextPage"></div>
<script type="text/template" id="nextPageTemplate">
<% if (nextLink != "") { %>
<nav><ul class="pager"><li><a href="#" id="next_page" >Next</a></li> </ul> </nav>
<%}%>
</script>
</div>
</div>
Then in your view it can look like this:
var template = _.template($('#nextPageTemplate').html());
view.$el.find('#nextPage').html(template(listSongs));
Now I'm unsure if your view El is "list-group" (but I hope it is).
I have recursive partial in angular for showing comments threads. And I have controls for edit and delete. Deleting working on server but i can't update client.
My main page:
<div class="list-group-item" ng-repeat="ch in img.comments" ng-include="'views/nestedComment.html'">
</div>
My partial look like:
<div class="list-group-item-info">
<h4>{{ch.app_user.email}}:</h4>
{{ch.body}}
<div class="controls" ng-if="ch.app_user_id==user.getUser().id">
<%=t :edit %>
<%=t :destroy %>
<%=t :answer %>
<%=t :shownested %>
<div class="list-group-item-danger" ng-repeat="ch in ch.children" ng-show="nested" ng-include="'views/nestedComment.html'">
</div>
</div>
</div>
And I use this function to delete
$scope.deletenested=function(parent,item){
$scope.$evalAsync(function(){
parent.children.splice(parent.children.indexOf(item),1);
})
$http.delete('/comments/'+item.id)
.success(function(){
alert('OK')
parent.children.splice(parent.children.indexOf(item),1)
})
.error(function(response,status){
if (status=='401'){
alert('You have to autorize')
$window.location.href='http://localhost:3000/app_users/sign_in';
}
})
}
This worked for me when i didn't use partials. But now i can't access to parent array.
I have an app in backbone and I want to know if is possible to sum inside a template value of the object.
For example I have this piece of template in underscore:
<% _.each(room1.combinations, function(room2) { %>
<div>
<div class="tot"><p>TOTAL:<span id="totale_<%= room2[0].attributes.id %>"></span></p>
</div>
<form method="POST" action="">
<% _.each(room2, function(room) { %>
<span><%= room.attributes.price %> EUR</span>
<% }); %>
<input type="button" class="submit-ricerca prenota-bt" name="buy" value="BUY">
</form>
</div>
<% }); %>
I want to put into the span with class total the sum of the price of each element inside it.
Is possible?
Thanks
Yes, it is possible. Just sum the prices (using reduce) and put them there:
<p>TOTAL:<span id="totale_<%= room2[0].attributes.id %>"><%=
_.reduce(room2, function(sum, room){return sum+room.attributes.price;}, 0)
%></span>
I'm building a single page portfolio with SilverStripe.
So far I am able to loop through my sites and all $Title[s] and $Content[s] are visible in one <div>. Now I want to attach a certain CSS-class if the current page (which is looped) is named "Contact".
Something like:
//Pseudocode:
<loop start>
if ($Title == 'Contact') <div class="a"></div> else <div class="b"></div>
<loop end>
Does anybody know how to do this?
<% if $Title == "Contact" %>
// Do something ...
<% end_if %>
you could try a custom getter method such as :
function DivClassName() {
return $this->Title == 'Contact'?'a':'b';
}
and use the following in your template.
<div class="$DivClassName"></div>
keeps the logic out of your templates :)
<% if Title = "Contact" %>
<div class="a"></div>
<% else %>
<div class="b"></div>
<% end_if %>