A part of our website includes users replying to reviews posted by other users. All replies(inputs) are bound to the same ng-model. In the HTML code, there's a form that is repeated, over and over again using ng-repeat. The problem is that after a user posts a reply the form doesn't get cleared, so the next user replying to the review, is left with a box that includes the review of the previous user, and therefore has to override it.
Here's our HTML code:
<li ng-repeat="reply in review.replies">
<div class="comment-avatar">
<img src="http://i9.photobucket.com/albums/a88/creaticode/avatar_2_zps7de12f8b.jpg" alt="">
</div>
<div class="comment-box">
<div class="comment-head">
<h6 ng-if="reply.authorType == 'user'" class="comment-name">{{reply.user.name}}</h6>
<h6 ng-if="reply.authorType == 'business'" class="comment-name by-author"> {{business.name}}</h6>
<span style="margin-top: 10px">{{reply.timestamp | date: 'd MMM, yy h:mm a ' }}
<i ng-click="deleteReply(review, reply)" class="delete glyphicon glyphicon-trash"></i>
</span>
</div>
<div class="comment-content">
{{reply.reply}}
</div>
</div>
</li>
Related
I am working on a post system with likes where the user can toggle the post`s like I have done everything correctly except the last step, the problem inside my v-for loop I fetch likes table from post-like relation(many to many since likes table has user_id and post_id) but it is iterating my button even when I add a condition look here-> duplicated like button, I have tried many things v-if, v-show I think the problem is with my algorithm I hope someone can fix that for me thanks.
<div class="panel panel-white post panel-shadow" v-for="post in posts" >
<div class="post-heading">
<div class="pull-left image">
<img v-bind:src="'img/profile/' + post.user.photo" 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">{{post.created_at | hour}}</h6>
</div>
</div>
<div class="post-description">
<p>{{post.content}}</p>
<div class="stats">
<button class="btn btn-default stat-item" #click.prevent="addLike(post.id)">
<i class="fa fa-thumbs-o-up" aria-hidden="false" style="color: blue" v-for="(like) in post.likes" v-bind:style="like.user_id===id && like.post_id===post.id?'color: blue;':'color: gray;'" > Like {{post.likes.length}}
</i> <!-- here is the duplicate problem-->
</button>
<a class="btn btn-default stat-item" #click.prevent>
<i class="fa fa-reply-all"> {{post.comments.length}}</i> Comments
</a>
</div>
</div>
<comment-input :post="post" :userId="id" :userPhoto="userPhoto"></comment-input>
<ul class="comments-list" v-for="comment in post.comments?post.comments:''">
<comments :comment="comment" :userId="id" :userPhoto="userPhoto"></comments>
</ul>
</div>
<hr>
</div>
</div>
Don't loop through the button element, try to use a method likedBythisUser to check if the current user liked the post in order to bind it to the button style :
methods:{
likedBythisUser(post,id){
return post.likes.find(like=>{
return like.user_id===id && like.post_id===post.id;
}) // return a boolean value
}
}
template :
<button class="btn btn-default stat-item" #click.prevent="addLike(post.id)">
<i class="fa fa-thumbs-o-up" aria-hidden="false" style="color: blue" bind:style="likedBythisUser(post,id)?'color: blue;':'color: gray;'" > Like {{post.likes.length}}
</i> <!-- here is the duplicate problem-->
</button>
I am using C#, JavaScript, HTML, Backbone!
I have a list of Groups on HTML page where each row has a Trash Can and pencil icon in order to delete/edit the Group/row. The pencil/Edit works fine however, the Trash Can/Delete does not work. Here is a sample of HTML:
<%
_.each(Groups, function(Group){ %>
<td><%=Grp.Nm%></td>
<td>
<div class="row ">
<div class="col-sm-10 text-right font-m pl-3">
<span>
<a id="edit-1"
[href="<%= Group.EditLink %>"][1]
class="icon"
data-toggle="tooltip"
title="Edit Group">
<span class="icon-edit"></span>
</a>
</span>
</div>
<div class="col-sm-2 font-m pl-3">
<span data-toggle="modal" data-target="#delete-group">
<a id="OK"
class="icon"
data-toggle="tooltip"
title="Delete Group">
<span class="icon-delete"></span>
</a>
</span>
</div>
</div>
</td>
<%})%>
Here is a sample of the C# code that list the rows:
base.Model.Groups.Add( new Group {
Name = thTet,
DeleteLink = string.Format("{0}{1}{2}",
Common.HostMapping.Factory.NavigationMap.DeleteGroup(),
HttpUtility.UrlEncode("?groupId="), theValue) });
When the User clicks the Trash Can a modal pops up for the User to Confirm the delete. This is where I cannot get the id of the row with the modal popping up. So without the id I cannot delete the row.
NOTE: The Listener in the View.js is triggering the correct method but there is no id.
Does anyone have any ideas?
Let's say I have a website like Facebook, Twitter, or any social network. I have posts in a feed. I retrieve a list of data about each post from the backend. This data contains the id, post description, number of likes, etc. The unique id is a way to identify each post.
I have a REST framework set up where if the user likes the post; it updates the likes count of that post and registers the user as he/he liked that post. For this to happen, I need to make an AJAX request on localhost/like/{post_id}
How can I get the id of the post? Should I put this id in a data-attribute in the like button and that way I can retrieve the id like this? If this is the case, should I put the id in all the actionable features (like button, dislike button, share button, etc.)?
Here's what my post's button container looks like:
<div class="grid post__btn-container">
<div class="item">
<i class="like"></i>
</div>
<div class="item">
<i class="dislike"></i>
</div>
<div class="item">
<i class="share"></i>
</div>
<div class="item">
<i class="comment"></i>
</div>
</div>
What is the best way to place the post id and get it and pass it as a POST request in Ajax?
Have a look at this:
https://jsfiddle.net/x5m7j0Lk/
Given a setup like this
<div class="grid post__btn-container" data-postid="123">
<div class="item">
<i class="like">Like</i>
</div>
<div class="item">
<i class="dislike">Dislike</i>
</div>
<div class="item">
<i class="share">Share</i>
</div>
<div class="item">
<i class="comment">Comment</i>
</div>
</div>
<div class="grid post__btn-container" data-postid="456">
<div class="item">
<i class="like">Like</i>
</div>
<div class="item">
<i class="dislike">Dislike</i>
</div>
<div class="item">
<i class="share">Share</i>
</div>
<div class="item">
<i class="comment">Comment</i>
</div>
</div>
You can retrieve the id like this:
var posts = $('div[class="grid post__btn-container"]').children()
posts.on("click", function(){
var postId = $(this).parent().data('postid')
alert(postId)
})
There are two parameters: date_begin (Date added) and date_end (Date delete). And I have a list where all users are displayed. And opposite each user there is an icon of a tick and a cross. These icons should vary depending on the parameters. Those. If only the parameter date_begin is filled, then the icon is displayed as a checkmark. Well, if both the date_begin and date_end parameters are filled in then the icon is displayed as a cross. The problem is that at the moment I have a cross icon opposite each user, although not all users have this option. How can this be remedied?
<div class="list-group" >
<div class="media" *ngFor="let user of users">
<a class="list-group-item ">
<h4 class=" media-heading list-group-item-heading"> {{user.full_name}} </h4>
<div class="row">
<div class="col-md-9">
<p class="list-group-item-text">{{user.position}}</p>
</div>
<div class="col-md-3">
<div class="media-left ">
<a *ngIf="(user.date_end$)">
<img class="media-object" src="assets/img/icon/checked.png" title="Uploaded">
</a>
<a *ngIf="!(user.date_end$)">
<img class="media-object" src="assets/img/icon/unchecked.png" title="Removed">
</a>
</div>
</div>
</div>
</a>
</div>
</div>
I'm quire new to Angular so I apologise if this has already been answered but I just couldn't figure it out when I see other uses for it.
I am using a REST API to simply fetch some news articles from an external URL and print them out nicely on a news listing page.
Link for results
(You can see the output of the JSON in the console)
The JSON that is returned looks like this (just showing one set):
[
{
"author":"Napier Lopez",
"title":"Report: First real Samsung Galaxy S8 photo and release date leaked",
"description":"Ever-reliable leaker Evan Blass of Venture Beat has just given us our best look at Samsung’s Galaxy S8 yet. The report confirms several of the details we’ve already learned about the device, as well as providing an announcement and release date. Blass confirms that the devices are foregoing the front fingerprint scanner for one place on …",
"url":"https://thenextweb.com/mobile/2017/01/26/report-first-real-samsung-galaxy-s8-photo-release-date-leaked/",
"urlToImage":"https://cdn3.tnwcdn.com/wp-content/blogs.dir/1/files/2017/01/Samsung-Galaxy-S8-Blur-not-real.jpg",
"publishedAt":"2017-01-26T22:13:13Z"
} ...
]
Here is my how I've printed out each news article:
app.js:
/* Newsfeed API Call */
var app = angular.module('newsFeed', [])
.controller('Newsfeed', function($scope, $http) {
$http.get('https://newsapi.org/v1/articles?source=the-next-web&sortBy=latest&apiKey=6ddf8d3cc8a54cc0abf89ad7d685da54').
then(function(response) {
$scope.news = response.data;
});
});
news-listing.html:
<div class="container" ng-controller="Newsfeed">
<br/>
<form>
<div class="col-md-6">
<h2>Newsfeed</h2>
<br/>
<div class="form-group">
<input type="text" class="form-control" ng-model="searchText" name="search-news" id="search-news" placeholder="Search for news">
</div>
<div class="form-group">
<select class="custom-select" ng-model="selectedAuthor" ng-options="n.author for n in news.articles | unique: 'author'">
<option ng-click="selectedAuthor = undefined" value="">Filter by Author</option>
</select>
</div>
</div>
</form>
<div>
<div class="card" style="width: 20rem;" ng-repeat="n in news.articles | filter:searchText | filter:selectedAuthor">
<img class="card-img-top img-responsive" src="{{n.urlToImage}}" alt="Card image cap">
<div class="card-block">
<h4 class="card-title">{{n.title | cut:true:50:' ...'}}</h4>
<p class="card-text"> {{n.author}} <small>on {{ formatDate(n.publishedAt) | date:'MM/dd/yyyy'}}</small> </p>
<p class="card-text"> {{n.description | cut:true:100:' ...'}}</p>
<a class="btn btn-primary" href="#" role="button"><i class="fa fa-thumbs-up" aria-hidden="true"></i></a>
<a class="btn btn-danger" href="#" role="button"><i class="fa fa-thumbs-down" aria-hidden="true"></i></a>
</div>
</div>
</div>
</div>
What I want is that for each news article in the news-listing I can click on it to see more details, so I would have an articles-details page that would take some sort of unique identifier and use that to pull out all of the data.
How can I achieve this baring in mind that the response in the JSON for the articles does not contain any sort of unique ID?
Inside your ng-repeat there is an angular variable: $index which gives you the position of the element in the array (news.articles). You can use it in order to access to the n element in the array.
So, you would have a function which you would call on you view button like this:
$scope.view = function (idx){
//get the n-esim article inside the array like something like
var element = $scope.news[idx] //and do some stuff with element
}
... and in your view you would have something like
<div class="card" style="width: 20rem;" ng-repeat="n in news.articles | filter:searchText | filter:selectedAuthor">
<!--...-->
<a class="btn btn-primary" role="button" ng-click="view($index)">Details</a>
<!--...-->
<a class="btn btn-primary" href="#" role="button"><i class="fa fa-thumbs-up" aria-hidden="true"></i></a>
<a class="btn btn-danger" href="#" role="button"><i class="fa fa-thumbs-down" aria-hidden="true"></i></a>
</div>
</div>