How to get the number of comments on a post - angularjs

I'm trying to get the number of comments a post has, but can't find a way to do it. I have a plunk if you want to check it.
<div class="anuncios">
<div class="panel panel-default" ng-repeat="posts in post | orderBy:'-FechaAnuncio'">
<div class="panel-heading" style="overflow:hidden;">
<p>{{posts.NombreLocal}}</p>
</div>
<div class="panel-body">
<p>{{posts.Anuncio}}</p>
<hr>
<small>{{posts.FechaAnuncio | date:'HH:mm:ss dd-MM-yyyy'}}</small>
<button class="btn btn-primary" style="float:right;" ng-click="showme = !showme"><span ng-hide="showme">Show Comments: {{posts.comments.length}}</span><span ng-show="showme">Hide Comments</span></button>
<div>
<div class="well" ng-show="showme">
<div class="input-group">
<input type="text" class="form-control" placeholder="Comment Here..." ng-model="comment.text">
<span class="input-group-btn">
<button class="btn btn-default" type="button" ng-click="addComment(posts, comment)">Publish!</button>
</span>
</div>
<!-- /input-group -->
<div class="cmt">
<div class="panel" ng-repeat="comments in posts.comments">
<p>{{comments.NombreLocal}}</p>
<p>{{comments.FechaComentario | date:'HH:mm:ss dd-MM-yyyy'}}</p>
<hr>
<p>{{comments.Comment}}</p>
<p></p>
</div>
<!--FIN DE COMENTARIOS -->
</div>
</div>
</div>
</div>
</div>
</div>
http://plnkr.co/edit/AIx0x7?p=preview
The number of comments should display next to "Show Comments:"
This is my Firebase Structure:
Firebase structure image

Since comments is an object, the easiest thing to do is to count the number of keys it has. You'll need to add this to your controller, or you could create your own filter.
app.controller('AnunciosCtrl', function($scope, $firebaseArray, $timeout) {
...
$scope.sizeOf = function(obj) {
return Object.keys(obj || {}).length;
};
});
HTML:
<span ng-hide="showme">Show Comments: {{ sizeOf(posts.comments) }}</span>
Plunker

In your controller do:
$scope.numComments = $scope.post.comments.length;
In your html :
...>Show Comments: {{numComments}}<...

Related

ng-repeat a block of html

I have two input forms, Date To and Date From that I want to repeat using ng-repeat. Right now, it's a block oh HTML text and I'm not sure what's the most efficient way of doing this except concatinating all the div elements the js side with the plus symbol.
ex. '<div class="container"> + bla bla + ...'
<div class="modal-body">
<!--Time From-->
<div class="row">
<div class="col-md-3 date-and-time-from" >
<label>Date/Time From</label>
</div>
<div class="col-md-9">
<div class="form-group">
<span class="date-field">
<ms-date-time-picker ng-model="newResource.booking[0].startDateTime" placeholder="From"></ms-date-time-picker>
</span>
</div>
</div>
</div>
<!--Time To-->
<div class="row">
<div class="col-md-3 date-and-time-to" >
<label>Date/Time To</label>
</div>
<div class="col-md-9">
<div class="form-group">
<span class="date-field">
<ms-date-time-picker ng-model="newResource.booking[0].endDateTime" placeholder="To" ></ms-date-time-picker>
</span>
</div>
</div>
</div>
</div>
The goal of my application is that a user chooses how many bookings he will store in his array in the first modal. Then he clicks a button, and the above html text will appear in the second modal. Based on the number of bookings the user chooses (let's say 3), the html above will repeat 3 times in a modal (there will be 3 Date From/Date To forms in a vertical list).
Any suggestions would be appreciated!
It is simple to use ng-repeat just go through the documentation here.
I see that in your question you are appending divs like:
htmlString ='<div id="1">Bla</div>'+'<div id="2">Bla</div>';
ngRepeat directive will be used on the HTML itself. Like this:
arrayOfItems = [1,2,3]; //in your controller
<!-- in your html -->
<div ng-repeat="item in arrayOfItems" id="{{item}}">
Bla
</div>
First Modals HTML
Number of bookings:
<input type="text" ng-model="numberOfBooking" name="numberOfBooking" />
<button type="button" ng-click="confirmNumberOfBooking()">Confirm Booking</button>
First Modal Controller
$scope.numberOfBooking = 1;
$scope.newResource.bookings = [
{
fromDateAndTime: "datetime",
toDateAndTime: "datetime"
}
];
$scope.confirmNumberOfBooking = confirmNumberOfBooking;
function confirmNumberOfBooking(){
for(var i = 0; i < $scope.numberOfBooking; i++){
$scope.newResource.bookings.push({fromDateAndTime: "datetime",toDateAndTime: "datetime"});
}
}
Second Modal HTML
<div ng-repeat="booking in newResource.bookings track by $index">
<!--Time From-->
<div class="row">
<div class="col-md-3 date-and-time-from" >
<label>Date/Time From</label>
</div>
<div class="col-md-9">
<div class="form-group">
<span class="date-field">
<ms-date-time-picker ng model="newResource.booking[$index].startDateTime" placeholder="From"></ms-date-time-picker>
</span>
</div>
</div>
</div>
<!--Time To-->
<div class="row">
<div class="col-md-3 date-and-time-to" >
<label>Date/Time To</label>
</div>
<div class="col-md-9">
<div class="form-group">
<span class="date-field">
<ms-date-time-picker ng-model="newResource.booking[$index].endDateTime" placeholder="To" ></ms-date-time-picker>
</span>
</div>
</div>
</div>

ng click in button dont logout

I'm doing a system to idle a user after 1 minute and I'm opening a modal with a button to alert the user with a button inside which redirects to login page.
controllerScope.logout = function () {
alert("logout");
$location.path('/');
AuthService.logout(controllerScope.user).then(function (result) {
$state.go('user.signin');
});
};
In my view:
<script type="text/ng-template" id="timedout-dialog.html">
<div class="modal-header">
<h3>Oh, Snap! You've Timed Out!</h3>
</div>
<div class="modal-body">
<p>
You were idle too long. Click the button below to be redirected to the login page and begin again.
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger btn-small" ng-click="doLogout()">Back To Login</button>
</div>
</script>
Why when I click on my "back to login" on modal it doesn't go to my function on the controller? I tried to pop up an alert, a simple thing but event that doesn't work
You need to make below changes, since you use controller as syntax :
In controller it should be like var controllerScope = this
In HTML controller declaration be like : ng-controller ="yourcontrollername as controllerScope"
During calling logout, it should be like ng-click="controllerScope.logout()"
Update
Your plunker has many issues, this even doesn't run angular.
So I created this Fiddle with minimal possible code to show the things to be done.
In general :
use controller as alias., for logout ng-click="inventoryCtrl.openNewDeviceModal()" and for opening modal popup use alias as well controller: 'InventoryController as inventoryCtrl',
You set doLogout() function into your ng-click. Would you mean logout() as in your controller ?
Your ng-click method is wrongly called: Kindly change ng-click="controllerScope.logout()"> instead of ng-click="doLogout()">
Update
I have uploaded my code to share with you https://jsfiddle.net/y0xrgjaf/
Your template code in outside of the controller div tag. You should add your all html code inside of the main div
<div ng-controller="controllername">
//all code should be here
</div>
Copy this below code and paste it
<div class="row" ng-controller="InventoryController as inventoryCtrl" >
<div class="col-md-12">
<div class="panel mb25">
<div class="panel-body">
<table class="table mb0 table-striped datatable" ui-jq="dataTable" ui-options="devicesData">
<thead>
<tr>
<th></th>
<th>S/N</th>
<th>IP</th>
<th>Name</th>
<th>Manufacturer</th>
<th>Model</th>
<th>Organization</th>
<th style="width:70px;"></th>
</tr>
</thead>
</table>
</div>
</div>
<div>
<button class="btn btn-default" ng-click="openNewDeviceModal()">Add Device</button>
</div>
</div>
<script type="text/ng-template" id="newDeviceModalContent.html">
<div class="modal-header">
<h3 class="modal-title" ng-bind="deviceModalTitle"> Add Device</h3>
</div>
<div class="modal-body">
<form class="form-horizontal bordered-group" role="form" name="addDeviceForm">
<div class="form-group">
<label class="col-sm-2 control-label">Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="name" ng-model="newdevice.data.name" required>
<span ng-show="addDeviceForm.name.$invalid">The name is required.</span>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">S/N</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="sn" ng-model="newdevice.data.sn" required>
<span ng-show="addDeviceForm.sn.$invalid">The S/N is required.</span>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Model</label>
<div class="col-sm-10">
<select class="form-control" ng-model="newdevice.device_type_id" ng-options="type.id as type.model for type in deviceTypes">
<option value="">None</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Organization</label>
<div class="col-sm-10">
<select class="form-control" ng-model="newdevice.organization_id" ng-options="organization.id as organization.data.name for organization in organizations">
<option value="">None</option>
</select>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-default btn-sm" ng-click="saveDevice()" ng-disabled="addDeviceForm.name.$invalid || addDeviceForm.sn.$invalid">Save</button>
<button class="btn btn-default btn-sm" ng-click="cancel()">Cancel</button>
</div>
</script>
<script type="text/ng-template" id="timedout-dialog.html">
<div class="modal-header">
<h3>Oh, Snap! You've Timed Out!</h3>
</div>
<div class="modal-body">
<p>
You were idle too long. Click the button below to be redirected to the login page and begin again.
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger btn-small" ng-click="inventoryCtrl.logout()">Back To Login</button>
</div>
</script>
</div>

Angularjs upload image

I'm trying to create an upload function using angularjs. I have watch and read few tutorials in the internet. Unfortunately all the tutorials are too complicated for me because I'm still new in this field.
<form ng-submit="upload(currentUser())">
<div class="row">
<div class="form-group">
<div class="col-xs-2">
<label>Car</label>
</div>
<div class="col-xs-5">
<input type="text" placeholder="Perodua Myvi" class="form-control" ng-model="newCar" required>
</div>
<div class="col-xs-5"></div>
</div>
</div>
<div class="row">
<div class="form-group">
<div class="col-xs-2">
<label>Price(RM) per day</label>
</div>
<div class="col-xs-5">
<input type="text" placeholder="80" class="form-control" ng-model="newPrice" required>
</div>
<div class="col-xs-5"></div>
</div>
</div>
<div class="row">
<div class="form-group">
<div class="col-xs-2">
<label>Business Area</label>
</div>
<div class="col-xs-5">
<input type="text" placeholder="Universiti Malaysia Sabah" class="form-control" ng-model="businessArea" required>
</div>
<div class="col-xs-5"></div>
</div>
</div>
<div class="row">
<div class="form-group">
<div class="col-xs-2">
<label>Insert Car Image</label>
<br>
</div>
<div class="col-xs-5">
<!--<button type="button" class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-picture"></span> Image
</button>-->
<input type="file"/>
</div>
<div class="col-xs-5"></div>
</div>
</div>
<div class="row">
<div class="form-group">
<div class="col-xs-2">
</div>
<div class="col-xs-5">
<button type="submit" class="btn btn-primary btn-sm pull-right">
<span class="glyphicon glyphicon-globe"></span> Publish
</button>
</div>
<div class="col-xs-5"></div>
</div>
</div>
<br>
<br>
</form>
app.controller('postadCtrl', [
'$scope',
'auth',
function($scope, auth) {
$scope.currentUser = auth.currentUser;
$scope.posts = [];
$scope.upload = function(user) {
$scope.posts.push({
company_name: user,
car_type: $scope.newCar,
seaters: 5,
price: $scope.newPrice,
contact: 038880000,
location: $scope.businessArea
});
};
}
]);
So how do I do this in the simplest form and explanation? And how does my router and module will look like?
The output should look like this.

Taking user in put in a Controller Array

I am new with Angularjs. I want to take user input in my array of the controller
This is the html
<div class="col-md-6">
<div class="row text-center">
<div class="col-xs-6">
<h4> data A:</h4>
</div>
<div class="col-xs-6">
<h4><input type="text" class="form-control" ng-model="a"></h4>
</div>
</div>
<div class="row text-center">
<div class="col-xs-6">
<h4>data B:</h4>
</div>
<div class="col-xs-6">
<h4><input type="text" class="form-control" ng-model="b"></h4>
</div>
</div>
<div class="row btn-primary text-center" ng-click="showData()">
<i class="glyphicon glyphicon-folder-open" aria-hidden="true">
<h4>data</h4>
</i>
</div>
and the controller
$scope.infoSet =[
{
"key" : "data A",
"value" : $scope.a
},
{
"key" : "data B",
"value" : $scope.b
}];
$scope.showData = function () {
console.log($scope.infoSet);
console.log($scope.a);
console.log($scope.b);
}
How can i do that ? i have tried Difficulty with ng-model, ng-repeat, and inputs .
But i cant put the input in proper format with this. please help . thanks in advance
Remove $scope.a and $scope.b, and use
ng-model="infoSet[0].value"
and
ng-model="infoSet[1].value"
Or use ng-repeat
<div class="row text-center" ng-repeat="info in infoSet">
<div class="col-xs-6">
<h4>{{info.key}}</h4>
</div>
<div class="col-xs-6">
<h4><input type="text" class="form-control" ng-model="info.value"></h4>
</div>
</div>

Having issues sending scope to the template in AngularJS

MY issue is this:
When I request the data from the server this sent the data correctly but in LoginController after doing the validation I'm trying to populate the user's username and email but those variables are not being printed in the template. However if I just send those variables in a simple JSON such as $scope.details = [{ 'username':'Karman', 'username':'karman#mail.com'}]; it's working fine, what am I doing wrong? Is there some issue with ng-repeat directive?
Thanks in advance to whom can help me out with this issue.....
ps: I'm using sillex and ng-resource just in case
<body ng-controller="LoginController">
<div class="col-xs-3 details-user">
<div class="col-xs-1">
<img src="web/img/avatar.jpg" alt="..." class="img-circle">
</div>
<div class="col-xs-2">
<ul>
<li ng-repeat="detail in details">
{{detail.username}} -- {{detail.email}}
</li>
</ul>
</div>
</div>
Controller:
function LoginController($scope, Login) {
var currentResource;
$scope.login = function () {
Login.query({email: $scope.email}, function success(data){
$scope.details = data;
//$scope.details = [{ 'username':'Karman', 'username':'karman#mail.com'}];
});
}
}
Form:
<!-- Main DIV -->
<div id="login" class="login-main">
<div class="form-wrap">
<div class="form-header">
<i class="fa fa-user"></i>
</div>
<div class="form-main">
<form>
<div class="form-group">
<input ng-model="email" type="text" class="input-large" placeholder="Tu email aqui..." required>
<input ng-model="password" type="password" class="input-large" placeholder="Tu password aqui..." required>
</div>
<button ng-click="login()" ng-show='addMode' class="btn btn-success">Sign In</button>
</form><!-- end form -->
</div><!-- end div form-main -->
<div class="form-footer">
<div class="row">
<div class="col-xs-7">
<i class="fa fa-unlock-alt"></i>
Forgot password?
</div>
<div class="col-xs-5">
<i class="fa fa-check"></i>
Sign Up
</div>
</div>
</div>
</div>
</div>

Resources