I'm working on a project, it was working normally. But then I had to add Iron-Router to add some features and one of my templates do not work anymore.
I have this home.html file, that import two templates, "nova" and "piadas". But only the "nova" is displayed. How do I fix it?
home.html:
<template name="home">
<br>
{{> nova}}
<div class="fixed-action-btn horizontal">
<a class="btn-floating btn-large green accent-4"> <i class="large material-icons">person</i> </a>
<ul>
<li><a class="btn-floating green accent-4"><i class="material-icons">add</i></a></li>
<li><a class="btn-floating green accent-4"><i class="material-icons">account_circle</i></a></li>
</ul>
</div>
<br>
{{> piadas}}
</template>
piadas.html:
<template name="piadas">
<div class="row"> {{#each piadas}}
<div class="col s12 m6">
<div class="card grey lighten-4">
<div class="card-content black-text"> <span class="card-title">{{titulo}}</span>
<p class="truncate">{{piada}}</p>
</div>
<div class="card-reveal"> <span class="card-title grey-text text-darken-4">{{titulo}}<i class="material-icons right">close</i></span>
<p>Essa piada foi enviada por <strong>{{autor}}</strong> no dia <strong>{{formataData}}</strong>.</p>
<button id="btn-like" class="btn" style="float: left;"><i class="material-icons ">thumb_up</i></button>
<button id="btn-denunciar" class="btn btn-danger" style="float: right;"><i class="material-icons ">flag</i></button>
</div>
<div class="card-action"> <i class="material-icons right">more_vert</i> </div>
</div>
</div> {{/each}} </div>
</template>
I've discovered that: how the "piadas" template was returning a helper function with some MongoDB querys, I had to pass the querys for the router.
Related
this is my first question here, I'm really desperate and I hope you can help me.
I'm trying to build a post/comment/reply system like Facebook by using vuejs, I'm using v-for to loop all posts/comments/replies after I use Axios to fetch data in my database (using laravel API), the problem here that I have input with v-model attached to a form inside my v-for loops when I type in my of my input it appears in all other inputs that has been looped here is an image for better understanding -> duplicate input,
<div class="panel panel-white post panel-shadow" v-for="(post) in posts" >
<div class="post-heading">
<div class="pull-left image">
<img src="https://bootdey.com/img/Content/user_1.jpg" class="img-circle avatar" alt="user profile image">
</div>
<div class="pull-left meta">
<div class="title h5">
<b>{{post.user.name}} </b>
made a post.
</div>
<h6 class="text-muted time">(number) minute ago</h6>
</div>
</div>
<div class="post-description">
<p>{{post.content}}</p>
<div class="stats">
<a href="#" class="btn btn-default stat-item">
<i class="fa fa-thumbs-up icon"></i>2
</a>
<a href="#" class="btn btn-default stat-item">
<i class="fa fa-share icon"></i>12
</a>
</div>
</div>
<div class="post-footer">
<form>
<div class="input-group">
<input type="text" name="comment" class="form-control" v-model.lazy="comments.comment" :class="{ 'is-invalid': comments.errors.has('comment') }" required="required" autocomplete="off">
<has-error :form="comments" field="comment"></has-error>
<span class="input-group-addon">
<button type="submit" class="fa fa-send form-control" #click.prevent="addComment(post.id)" >Send</button>
</span>
</div>
</form>
<ul class="comments-list" v-for="(comment) in post.comments?post.comments:''">
<li class="comment" >
<a class="pull-left" href="#">
<img class="avatar" src="https://bootdey.com/img/Content/user_1.jpg" alt="avatar">
</a>
<div class="comment-body">
<div class="comment-heading">
<h4 class="user">{{comment.user?comment.user.name:"-"}}</h4>
<h5 class="time">(number) minutes ago</h5>
</div>
<p>{{comment.comment}}</p>
<form>
<div class="input-group">
<input type="text" name="reply" class="form-control" v-model="replies.reply" :class="{ 'is-invalid': replies.errors.has('reply') }" required="required" autocomplete="off">
<has-error :form="replies" field="reply"></has-error>
<span class="input-group-addon">
<button type="submit" class="fa fa-send form-control" #click.prevent="addReply(comment.id)" >Send</button>
</span>
</div>
</form>
</div>
<ul class="comments-list" v-for="reply in comment.reply?comment.reply:''">
<li class="comment">
<a class="pull-left" href="#">
<img class="avatar" src="https://bootdey.com/img/Content/user_3.jpg" alt="avatar">
</a>
<div class="comment-body">
<div class="comment-heading">
<h4 class="user">{{reply.user.name}}</h4>
<h5 class="time">(number) minutes ago</h5>
</div>
<p>{{reply.reply}}</p>
</div>
</li>
</ul>
</li>
</ul>
</div>
</div>
the easy way is put every post, comment and reply in separate components remember that's components for, to have separate states(or data) that you can easily manipulate it this way you write not only hard too extends but also its unreadable.
but the only way too bind a state in loop the way i said you can try with computed
v-model="replies[index].reply"
to:
v-model="replyComputed(index)"
Your problem is that replies.reply is the same for every looped comment. You should bind the reply to the specific comment you currently are iterating over e.g. v-model="comment.reply".
I'm trying to capture data of the whole {{#each categories}} but my button .toggle-addToSet I use to do that is not capturing all the way to the top, it's only capturing data for {{#each set}} which is within {{#each categories}} unfortunately the data I need is not in there, therefore I need a way to capture data beyond {{#each set}} all the way to {{#each categories}}
this is what it looks like in the HTML
<ul>
{{#each categories}}
<li class="myIdd">
<div class="row col s12 m7">
<div class="card" id="cardId">
<div class="card-image waves-effect waves-block waves-light">
<img src="{{better_featured_image.source_url}}">
</div>
<div class="card-content">
<h5 class=" truncate grey-text text-darken-4">{{title.rendered}}</h5>
MORE <i class="waves-effect waves-teal small material-icons right">playlist_add</i>{{>
likePartial}}{{> reblogPartial}}
<!-- The modal below is what brings up all the sets the user has created so that the user can pick with set they wat to save the article in -->
<div id="modal2" class="modal bottom-sheet">
<div class="modal-content">
<div class="row">
<!-- data being captured is only below this, but i need it to capture up until li class ="myIdd" -->
{{#each set}}
<div class="col s6 m6 addSet teal">
<div class="card ">
<div class="card-image">
<span class="card-title cardSet">{{name}}</span>
</div>
<div class="card-footer">
<!-- This button is what i'm using to try and capture the data all the way to li class ="myIdd" -->
<button type="button" class="btn toggle-addToSet" name="button" data-setid="{{s._id}}">add Article Id to this Set!</button>
</div>
</div>
</div>
{{/each}}
<!-- end of capture -->
</div>
</div>
</div>
</div>
</div>
</div>
</li>
{{/each}}
</ul>
In my template helper, it's like this
Template.summeryArticle.events({
'click .toggle-addToSet': function(e, template) {
var ob = this
console.log(ob);
}
});
where var ob = this is only capturing
{{#each set}}
<div class="col s6 m6 addSet teal">
<div class="card ">
<div class="card-image">
<span class="card-title cardSet">{{name}}</span>
</div>
<div class="card-footer">
<!-- This button is what I'm using to try and capture the data all the way to li class ="myIdd" -->
<button type="button" class="btn toggle-addToSet" name="button" data-setid="{{s._id}}">add Article Id to this Set!</button>
</div>
</div>
</div>
{{/each}}
But as discussed, I need it to capture the whole document i.e
{{#each categories}}
capture everything in here
{{/each}}
When you're calling {{#each set}}...{{/each}} you're changing the context of inner block.
I'm suggesting to use {{#each catSet in set}}...{{/each}} this won't change the context of the each block, but will introduce new catSet variable, as described here
In your case:
<ul>
{{#each categories}}
<li class="myIdd">
<div class="row col s12 m7">
<div class="card" id="cardId">
<div class="card-image waves-effect waves-block waves-light">
<img src="{{better_featured_image.source_url}}">
</div>
<div class="card-content">
<h5 class=" truncate grey-text text-darken-4">{{title.rendered}}</h5>
MORE <i class="waves-effect waves-teal small material-icons right">playlist_add</i>{{>
likePartial}}{{> reblogPartial}}
<!-- The modal below is what brings up all the sets the user has created so that the user can pick with set they wat to save the article in -->
<div id="modal2" class="modal bottom-sheet">
<div class="modal-content">
<div class="row">
<!-- data being captured is only below this, but i need it to capture up until li class ="myIdd" -->
{{#each catSet in set}}
<div class="col s6 m6 addSet teal">
<div class="card ">
<div class="card-image">
<span class="card-title cardSet">{{catSet.name}}</span>
</div>
<div class="card-footer">
<!-- This button is what i'm using to try and capture the data all the way to li class ="myIdd" -->
<button type="button" class="btn toggle-addToSet" name="button" data-setid="{{s._id}}">add Article Id to this Set!</button>
</div>
</div>
</div>
{{/each}}
<!-- end of capture -->
</div>
</div>
</div>
</div>
</div>
</div>
</li>
{{/each}}
</ul>
I want to convert my div part of my angularjs application into image so that I can download it as per clients requirements.
<div class="wrap-dashboard">
<div class="dashboard">
<div gridster="vm.gridsterOptions">
<ul>
<li gridster-item="widget" ng-repeat="widget in vm.widgets">
<div class="box" >
<div class="box-header">
<h3>{{ widget.name }}</h3>
<div class="box-header-btns pull-right">
<a title="Download widget" ng-click="" id="download"><i class="glyphicon glyphicon-download"></i></a>
<a title="settings" ng-click="vm.openSettings(widget)"><i class="glyphicon glyphicon-cog"></i></a>
<a title="Remove widget" ng-click="vm.remove(widget)"><i class="glyphicon glyphicon-trash"></i></a>
</div>
</div>
<div class="box-content">
<nvd3 options="widget.options" data="widget.options.dataList" api="widget.options.api" config="vm.config" events="vm.events"></nvd3>
</div>
</div>
</li>
</ul>
</div>
</div>
The output of this code is a chart
Now I want to download this chart, but don't know how...
Any kind of help will be appreciated. Thanks in advance!!
I am very new to angular, need some help this problem..
top-header.html
<div class="row">
<some default html contents goes here>
<breadcrumbs-extras>
</breadcrumbs-extras>
</div>
page.html
<div class="page-header" data-ng-include="'tpl/top-header.html'">
<div class="col s12 m6 l6 right-align ">
<a href="#/in" class="btn blue lighten-1 white-text z-depth-0">
<i class="fa fa-upload"></i> Upload
</a>
<a href="#/inv" class="btn green lighten-1 white-text z-depth-0">
<i class="fa fa-cart-arrow-down"></i> Reorder
</a>
</div>
</div>
I need the contents of page-header div to be copied to breadcrumbs-extras directive,
How can I achieve this...
I have such code:
<div ui-tree>
<ol ui-tree-nodes="" ng-model="policies">
<li ng-repeat="item in policies" ui-tree-node>
<div ui-tree-handle>
<accordion>
<accordion-group>
<accordion-heading>
{{item.Title}}
<i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i></accordion-heading>
{{item.Content}}
<ol ui-tree-nodes="" ng-model="item.Options" data-nodrop>
<li ng-repeat="subItem in item.Options" ui-tree-node>
<div ui-tree-handle>
<accordion-group>
<accordion-heading>{{subItem.Title}}<i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i></accordion-heading>
{{subItem.Content}}
</accordion-group>
</div>
</li>
</ol>
</accordion-group>
</accordion>
</div>
</li>
</ol>
</div>
and when i click on header to roll over content of accordion bootstrap i get that drag and drop event is handled
how could i:
add to accordion-header some icon, with the help of which i could drag and drop all my nodes, and when i click on title my data get rolled as bootstrap do? Is it reall to hadle too events? and how?
https://github.com/JimLiu/angular-ui-tree
http://angular-ui.github.io/bootstrap/
upd:
<script id="template/accordion/accordion-group.html" type="text/ng-template">
<div class="panel panel-default">
<div class="panel-heading">
<h4 href class="btn btn-success btn-xs accordion-toggle pull-left" data-nodrag ng-click="toggleOpen();"><i class="glyphicon" ng-class="{'glyphicon-chevron-right': isOpen, 'glyphicon-chevron-down': !isOpen}"></i></h4>
<h4 class="panel-title">
<a href accordion-transclude="heading"><span>{{heading}}</span></a>
</h4>
</div>
<div class="panel-collapse" collapse="!isOpen">
<div class="panel-body" ng-transclude></div>
</div>
</div>
</script>
<div ui-tree="options" data-drag-delay="20">
<ol ui-tree-nodes="" ng-model="articles">
<li ng-repeat="item in articles" ui-tree-node>
<div ui-tree-handle>
<accordion close-others="false">
<accordion-group>
<accordion-heading>
{{item.Title}}
</accordion-heading>
<div ng-bind-html="item.Content"></div>
<ol ui-tree-nodes="" ng-model="item.Options">
<li ng-repeat="subItem in item.Options " ui-tree-node>
<div ui-tree-handle>
<accordion close-others="false">
<accordion-group>
<accordion-heading>{{subItem.Title}}
</accordion-heading>
<div ng-bind-html="subItem.Content"></div>
</accordion-group>
</accordion>
</div>
</li>
</ol>
</accordion-group>
</accordion>
</div>
</li>
</ol>
</div>
drag and drop work only if i click on header text, or on body text (when on panel-title nothing is fired)
opening is on ng-click="toggleOpen();" and all is ok, just that drag and drop must be on whole element (cursor is for whole element, but drag-and-drop is only for element text)
how to be with scopes maybe?
Wrap <accordion-heading> content in a <div>
HTML accordion code
<accordion close-others="false">
<accordion-group is-open="isopen">
<accordion-heading ng-click="isopen=!isopen">
<div>{{item.Title}}</div>
</accordion-heading>
<div ng-bind-html="item.Content"></div>
<ol ui-tree-nodes="" ng-model="item.Options">
<li ng-repeat="subItem in item.Options " ui-tree-node>
<div ui-tree-handle>
<accordion close-others="false">
<accordion-group>
<accordion-heading>{{subItem.Title}}
</accordion-heading>
<div ng-bind-html="subItem.Content"></div>
</accordion-group>
</accordion>
</div>
</li>
</ol>
</accordion-group>
</accordion>
Hope this will help you.
Try to use $event.stopPropagation() on toggle accordion. In my case I added ui-tree-handle only on icon like this
<div class="panel-controls left" ng-hide="isEditable" ui-tree-handle>
<span class="controls-item no-border">
<i class="glyphicon glyphicon-th-list text-sm text-gray"></i>
</span>
</div>
Full code
<div ui-tree="options" data-max-depth="3">
<!-- Ranks list START -->
<div ui-tree-nodes data-type="rank" ng-model="taskbook.ranks">
<div ng-repeat="rank in taskbook.ranks"
class="panel panel-clean panel-solid panel-sortable"
ui-tree-node
ng-controller="RankListCtrl"
data-type="rank">
<!-- Rank Edit START -->
<div class="panel-heading clearfix"
ng-class="{'': isCollapsed, 'collapsed': !isCollapsed}">
<div class="panel-controls left" ng-hide="isEditable" ui-tree-handle>
<span class="controls-item no-border">
<i class="glyphicon glyphicon-th-list text-sm text-gray"></i>
</span>
</div>
<h2 class="panel-title pull-left" ng-hide="isEditable">
<span ng-bind="rank.name | truncate:false:15"></span>
</h2>
<div class="inline-edit" data-nodrag ng-show="isEditable">
<form class="form-inline" role="form">
<div class="form-group">
<input type="text"
class="form-control"
placeholder="Rank name"
ng-model="rank.name"
focus-me="isEditable">
</div>
</form>
</div>
<div class="panel-controls right">
<button type="button"
class="controls-item btn btn-sm btn-danger btn-flat text-sm"
ng-hide="!isEditable"
ng-click="cancelEditable()">
<i class="glyphicon glyphicon-remove"></i>
</button>
<button type="button"
class="controls-item btn btn-sm btn-success btn-flat text-sm"
ng-hide="!isEditable"
ng-disabled="rank.name === ''|| isSaving"
ng-click="hideEditable()">
<i class="glyphicon glyphicon-ok"></i>
</button>
</div>
</div></div></div>
The only thing is that I did't use accordion. I implemented collapsed directive.
Hope this can help!
Good luck