How can I order the post to top-down structure (the post which has highest likes number will be first and the last is the post which lowest likes number). To do that I set oderBy:likes.length but it is not work. Please help, thanks!
function MyController($scope) {
$scope.posts = [{"title": "AAtitle",
"content":"AAcontent",
"likes":["person1", "person2", "person3"]
},
{"title": "BBtitle",
"content":"BBcontent",
"likes":["person10"]
},
{"title": "CCtitle",
"content":"CCcontent",
"likes":["person10","person11", "person100", "person1", "person2"]
}
]
}
<div ng-controller = "MyController">
<ul>
<li ng-repeat = "post in posts | oderBy: likes.length">
<div> {{post.title}} </div>
<div> {{post.content}} </div>
<div> {{post.likes.length}} </div>
</li>
</ul>
</div>
You could write a function to do the sorting in the controller before displaying in view. Or preferable, you could write a custom filter
Filter:
angular.module('YourAppName', [])
.filter('orderByLikes', function() {
function compare(a, b) {
return b.likes.length - a.likes.length;
}
return function (input) {
return input.sort(compare);
}
});
View:
<div ng-controller = "MyController">
<ul>
<li ng-repeat = "post in posts | orderByLikes:posts">
<div> {{post.title}} </div>
<div> {{post.content}} </div>
<div> {{post.likes.length}} </div>
</li>
</ul>
</div>
Here is a working Fiddle
Related
I'm doing a tutorial over angular 1.5 and I've gotten far into it and one of the sections seems broken concerning matching a current user to the author username. The class injects the User service and I think assumes I can inherit from a parent controller for the author but it comes up undefined. I tried injecting $scope then setting a variable to $scope.$parent.article (article is the object that has the author name in it) but this was still undefined. I checked the parent controller doing a console log on article and it does have the data that I am trying to get. Here is a link to my project if you want to look at the entire thing but I'll try to post just the relevant code below. https://github.com/RawleJuglal/flow_news_app/tree/front_end/src/js
Parent Controller (article.controller.js)
import marked from 'marked';
class ArticleCtrl {
constructor(article, $sce, $rootScope) {
'ngInject';
this.article = article;
console.log(this.article);
//THIS IS CONSOLE LOG
//{title: "Juglal For StackOverflow",
slug: "juglal-for-stackoverflow-ba400n",
body: "<p> Need the goods</p>",
createdAt: "2017-04-25T14:51:42.131Z",
updatedAt: "2017-04-25T14:51:42.131Z",
author:{
bio:"I'm a MEAN stack developer. But if I don't find a job in Oklahoma soon, I'll be learning C++/Sharp."
following:false
image:"https://media.licdn.com/mpr/mpr/shrinknp_200_200/p/6/000/1e9/0e2/3cd7175.jpg"
username:"RawleJuglal",....
}
// Update the title of this page
$rootScope.setPageTitle(this.article.title);
this.article.body = $sce.trustAsHtml(marked(this.article.body, { sanitize: true }));
}
}
export default ArticleCtrl;
Child Controller (article-actions.components.js)
class ArticleActionsCtrl {
constructor(Articles, User, $state) {
'ngInject';
this._Articles = Articles;
this._$state = $state;
//Code that causes the error because this.article.author.username is undefined
if (User.current) {
this.canModify = (User.current.username === this.article.author.username);
} else {
this.canModify = false;
}
}
}
let ArticleActions = {
bindings: {
article: '='
},
controller: ArticleActionsCtrl,
templateUrl: 'article/article-actions.html'
};
export default ArticleActions;
HTML(article.html) //Just in case this the problem
<div class="article-page">
<div class="banner">
<div class="container">
<h1 ng-bind="::$ctrl.article.title"></h1>
<article-actions article="$ctrl.article"></article-actions>
</div>
</div>
<div class="container page">
<div class="row article-content">
<div class="col-xs-12">
<div>
<div ng-bind-html="::$ctrl.article.body"></div>
</div>
<ul class="tag-list">
<li class="tag-default tag-pill tag-outline"
ng-repeat="tag in ::$ctrl.article.tagList">
{{ tag }}
</li>
</ul>
</div>
</div>
<hr />
<div class="article-actions">
<article-actions article="$ctrl.article"></article-actions>
</div>
<div class="row">
<div class="col-xs-12 col-md-8 offset-md-2">
<div>
<form class="card comment-form">
<div class="card-block">
<textarea class="form-control"
placeholder="Write a comment..."
rows="3"></textarea>
</div>
<div class="card-footer">
<img class="comment-author-img" />
<button class="btn btn-sm btn-primary" type="submit">
Post Comment
</button>
</div>
</form>
</div>
<div class="card">
<div class="card-block">
<p class="card-text">This is an example comment.</p>
</div>
<div class="card-footer">
<a class="comment-author" href="">
<img class="comment-author-img" />
</a>
<a class="comment-author" href="">
BradGreen
</a>
<span class="date-posted">
Jan 20, 2016
</span>
</div>
</div>
</div>
</div>
</div>
</div>
In fact, your example will work with angular 1.5 but not >1.6.
here is the reason :
Starting with angular 1.6, bindings are not yet set in the constructor. If you need them, move your code to the $onInit function.
Here is your new ArticleActionsCtrl :
class ArticleActionsCtrl {
constructor(Articles, User, $state) {
'ngInject';
this._Articles = Articles;
this._$state = $state;
this.User = User;
}
$onInit() {
if (this.User.current) {
this.canModify = (this.User.current.username === this.article.author.username);
} else {
this.canModify = false;
}
}
}
let ArticleActions = {
bindings: {
article: '='
},
controller: ArticleActionsCtrl,
templateUrl: 'article/article-actions.html'
};
export default ArticleActions;
I did not test it, do not hesitate to tell me if you have any problem with it.
I have a simple Angular code to show and hide a poppin, but every time I use it I am blocked in the function.
In my controller I have this to show the poppin :
$scope.showHidden = function() {
console.log('in')
$scope.showIt = true;
};
And this to hide it :
$scope.hideIt = function() {
console.log('out')
$scope.showIt = false;
};
And in my HTML :
<li class="beer_list_item beer_item" ng-repeat="beer in beers | filter : myFilter" ng-click="showHidden()">
<img ng-src="{{beer.img}} " alt="{{beer.alt}}" />
<div class="beer_list_item_desc" ng-show="showIt">
<h2 class="title1">{{beer.name}}</h2>
<img src="{{beer.img}}" alt="{{beer.alt}}"/>
<p>{{beer.desc}}</p>
<button class="btn" ng-click="hideIt()">Close</button>
</div>
</li>
If I click on the item the poppin appears, and when I click on the close btn, I see 'out' and 'in' in my logs, and the poppin never disappear.
I'm sure it's a stupid mistake, but I don't see it. If anyone have an idea.. thanks by advance !
You need to prevent the event propagation when click on hideIt:
<button class="btn" ng-click="hideIt();$event.stopPropagation();">Close</button>
This could be a refactoring:
function BeersCtrl($scope, beers) {
$scope.beers = beers;
$scope.showBeerList = true;
$scope.toggleBeerList = function(event) {
$scope.showBeerList = !$scope.showBeerList;
};
}
angular
.module('test', [])
.controller('BeersCtrl', BeersCtrl)
.value('beers', [
{ name: 'Peroni' },
{ name: 'Guinnes' }
])
;
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<section ng-app="test">
<article ng-controller="BeersCtrl">
<div>
<button
ng-click="toggleBeerList($event)"
type="button">Toggle Beer List</beer>
</div>
<ul ng-show="showBeerList">
<li
ng-repeat="beer in beers">
<span ng-bind="beer.name"></span>
</li>
</ul>
</article>
</section>
Angular.js is pretty new to me. I have learned before the $scope method for the controller and now trying the "this" method. For some reason I can not get my ng-repeat to work. here's my code:
HTML:
<ul class="nav nav-pills">
<li><a ng-click="myCtrl.tab=1" href>one</a></li>
<li><a ng-click="myCtrl.tab=2" href>two</a></li>
<li><a ng-click="myCtrl.tab=3" href>three</a></li>
</ul>
<div ng-controller="imageContr as imageCtrl">
<div ng-show="myCtrl.tab === 1" class="tab">
<h3>ONE title</h3>
<p>hello</p>
<li ng-repeat="item in gallery">
<img alt="imagealt" ng-src="{{item.photo}}">
</li>
</div>
<div ng-show="myCtrl.tab === 2" class="tab">
<h3>TWO title</h3>
<p>how are</p>
</div>
<div ng-show="myCtrl.tab === 3" class="tab">
<h3>THREE title</h3>
<p>you?</p>
</div>
</div>
</section>
</body>
</html>
APP.JS:
(function() {
var app = angular.module('myApp', []);
app.controller('myController', function() {
this.tab = 1;
});
app.controller('imageContr', function() {
this.gallery = images;
var images = {
photo: 'image1.jpg'
};
});
})();
Declare images before you assign it, and make it an array
var images = [{ photo: 'image1.jpg' }];
this.gallery = images;
Then in your view:
<li ng-repeat="item in imageCtrl.gallery">
<img alt="imagealt" ng-src="{{item.photo}}">
</li>
You are storing the gallery on this of the controller (which is basically the $scope), hence you need to access it in the template via imageContr as well:
<li ng-repeat="item in imageCtrl.gallery">
<img alt="imagealt" ng-src="{{item.photo}}">
</li>
You could also consider making gallery an array, so can easily iterate over it. Or you need to use the "iterate over object properties"-syntax:
<div ng-repeat="(key, value) in myObj"> ... </div>
What I'm trying to achieve is that if a Post contains comments, it should display the comments. I tried the angular.equals, which either doesn't work or I am not familiar on how to use it right?
Here's the Controller for both Post and Comment.
var PostController = function ($scope, $location, Post, Comment) {
$scope.search = function () {
Post.query({
offset: $scope.offset,
limit: $scope.limit
},
function (data) {
$scope.more = data.length === 20;
$scope.posts = $scope.posts.concat(data);
});
};
$scope.searchComments = function () {
Comment.query({
},
function (data) {
$scope.comments = data;
});
};
$scope.showComment = function () {
angular.equals(Post, Comment);
}
}
And here's from the view:
<ul class="posts">
<li ng-repeat="post in posts">
<div class="post-info">
<h1>{{post.title}}</h1>
<div class="right-section">
<div class="edit-post-button right">Edit</div>
<span class="reputation right">{{post.reputation}}</span>
</div>
</div>
<br />
<div class="post-box">
<p>
{{post.content}}
</p>
</div>
<br />
<ul>
<li ng-repeat="comment in comments" ng-show="showComment()">
{{comment.content}}
</li>
</ul>
</li>
</ul>
Maybe this could be done in the back-end? I am not sure?
It seems like you want to filter the comments to a particaular post. As you have said in comments, the Comment resource has a pid that ties it to a particular post.
The best way to accomplish the filtering is with an angular filter.
In this way, you don't need to compare anything with equals, you can just filter the comments in the markup:
<ul>
<li ng-repeat="comment in comments | filter:{ pid: post.id }">
{{comment.content}}
</li>
</ul>
So I ma trying to loop through an array and create an list item for each object in it.
However when then adding an ng-click to that item i get the following error, even though the code prints out correctly.
Syntax Error: Token '$index' is unexpected, expecting [:]
I have the following code:
<body ng-controller="VideoController as VidCtrl">
<div class="row" id="grid">
<div ng-repeat="array in videos" ng-show="VidCtrl.isActive({{$index}})">
<ul class="small-block-grid-3">
<li ng-repeat="video in array" ng-click="VidCtrl.setVideo({{$index}})">
<img src="{{video.image}}">
<div>
<h5>{{video.title}}</h5>
<p>{{video.ingress}}</p>
</div>
</li>
</ul>
</div>
<ul class="pagination">
<li ng-class="{'current':isActive($index)}" ng-repeat="array in videos"><a ng-click="VidCtrl.setPanel($index)" href="#">{{$index + 1}}</a></li>
</ul>
</div>
And This is my js:
var videos = [];
var activeVideo = null;
var app = angular.module('webb-tvApp', []);
app.controller('VideoController', function($scope){
$scope.videos = videos;
this.activePanel = 0;
this.setPanel = function(val){
this.activePanel = val;
}
this.isActive = function(val){
return this.activePanel === val;
}
this.setVideo = function(vidIndex){
console.log(videos[this.activePanel][vidIndex]);
}
});
The videos array has the following structure.
var videos = [
[
{
image: "foo",
title: "bar",
ingress: "foobar",
},
{},
{}
],
[
{},
{},
]
]
I am new to angular so go easy on me.
When using these directives you can use the variables without interpolation {{}}. Additionally, you can use ng-src with your images instead of using src.
<body ng-controller="VideoController as VidCtrl">
<div class="row" id="grid">
<div ng-repeat="array in videos" ng-show="VidCtrl.isActive($index)">
<ul class="small-block-grid-3">
<li ng-repeat="video in array" ng-click="VidCtrl.setVideo($index)">
<img ng-src="{{video.image}}">
<div>
<h5>{{video.title}}</h5>
<p>{{video.ingress}}</p>
</div>
</li>
</ul>
</div>
<ul class="pagination">
<li ng-class="{'current':isActive($index)}" ng-repeat="array in videos"><a ng-click="VidCtrl.setPanel($index)" href="#">{{$index + 1}}</a></li>
</ul>
</div>
Few things I noticed:
Remove interpolation from inside ng-show and ng-click
<div ... ng-show="VidCtrl.isActive($index)">
...
<li ... ng-click="VidCtrl.setVideo($index)">
And replace src with ng-src
<img ng-src="{{video.image}}">