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>
Related
I need to get array values from form to controller and could not find a way to do so.
HTML Form:
<div class="input-wrap">
<label>CNC Location</label>
<div class="input-inner">
<div class="input-area input-row">
<input type="text" id="latitude" name="locationLat" ng-model="actorData.cncLocation['lat']" placeholder="Latitude">
<input type="text" id="longitude" name="locationLong" ng-model="actorData.cncLocation['long']" placeholder="Longitude">
<input type="text" id="location-name" name="locationName" ng-model="actorData.cncLocation['name']" placeholder="Name">
</div>
<div class="buttons-area">
<a href class="remove-row"><i class="fa fa-minus-square"></i></a>
<a href class="add-row" ng-click="addRow()"><i class="fa fa-plus-square"></i></a>
</div>
</div>
<div ng-messages="actorForm.cncLocation.$dirty && actorForm.cncLocation.$error">
<span class="error-msg" ng-message="required">Required</span>
</div>
</div>
Controller:
angular.forEach($scope.actorData.cncLocation, function(){
$scope.cncLocation.push($scope.actorData.cncLocation);
console.log($scope.cncLocation);
});
I need to send cncLocation array with objects which includes {"lat": "", "long":"", "name":""} where user can add and remove rows.
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>
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.
I am kind of new in AngularJS, and I have a form that users can edit there form. But when user clicks update, it updates the form. BUT, the user does not update the user. Shown in the image
Image here
Here is my code:
<div ng-controller="MyCtrl">
<div class="people-view">
<h2 class="name">{{people.first}}</h2>
<h2 class="name">{{people.last}}</h2>
<span class="title">{{people.title}}</span>
<span class="date">{{people.date}} </span>
</div>
</div>
</div>
<!-- the form -->
<div class="list-view">
<form>
<fieldset ng-disabled="inactive">
<legend>Basic Info</legend>
<b>First Name:</b>
<input type="text" ng-model="myObject.first">
<br>
<b>Last Name:</b>
<input type="text" ng-model="myObject.last">
<button type="button" class="edit" ng-show="inactive" ng-click="inactive = !inactive">
Edit
</button>
<button type="submit" class="submit" ng-show="!inactive" ng-click="update()">Update</button>
</form>
App.js
var app = angular.module("Portal", ['ngRoute']);
app.controller('MyCtrl', function($scope) {
$scope.inactive = true;
$scope.people = {};
$scope.myObject = JSON.parse(localStorage.getItem('myObject')) || {
first : $scope.people.first,
last : $scope.people.last,
};
$scope.update = function(){
$scope.people.first = $scope.myObject.first;
$scope.people.last = $scope.myObject.last;
localStorage.setItem('myObject', JSON.stringify($scope.myObject));
};
$scope.deletePeople = deletePeople;
function deletePeople(id){
var userToDelete;
$scope.people.forEach(function(p, index){
if(p.id == id){
userToDelete = index;
}
});
$scope.people.splice(userToDelete, 1);
console.log($scope.people);
}
});
List of users
<div class="people" ng-repeat="p in people | filter:userSearch" >
<a href="#/people/{{ p.id }}">
<img ng-src="{{p.img}}"/>
<span class="name">{{p.first}} </span>
<span class="name">{{p.last}} </span>
<p class="title">{{p.title}} </p>
<span class="date">{{p.date}} </span>
</a>
</div>
The people view section should be included under <div ng-controller="MyCtrl"> div. So just move that line up so it's the first line of the code.
Your ng-model in the form needs to be people.first and people.last respectively. E.g. <b>First Name:</b>
<input type="text" ng-model="people.first">
<br>
<b>Last Name:</b>
<input type="text" ng-model="people.last">
check this
As Swailem95 said you have to move the <div ng-controller="MyCtrl"> top and it looks like below after that.
<div ng-controller="MyCtrl">
<div class="people-view">
<h2 class="name">{{people.first}}</h2>
<h2 class="name">{{people.last}}</h2>
<span class="title">{{people.title}}</span>
<span class="date">{{people.date}} </span>
</div>
<!-- the form -->
<div class="list-view">
<form>
<fieldset ng-disabled="inactive">
<legend>Basic Info</legend>
<b>First Name:</b>
<input type="text" ng-model="myObject.first">
<br>
<b>Last Name:</b>
<input type="text" ng-model="myObject.last">
</fieldset>
<button type="button" class="edit" ng-show="inactive" ng-click="inactive = !inactive">
Edit
</button>
<button type="submit" class="submit" ng-show="!inactive" ng-click="update()">Update</button>
</form>
</div>
</div>
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}}<...