AngularJS error when i am showing the user - angularjs

I am creating a task manager but when i show the name of the user the administrator cannot modify the tasks from the users like an user:
The function to obtain the tasks its:
$scope.get = function(){
var user = $stateParams.userId;
if(user){
userService.detail({id: user}).then(function(response){
$scope.user = response;
}).catch(function(error){
notifications.error(error);
});
}
taskService.get(user).then(function(response){
$scope.tasks = response;
}).catch(function(error){
notifications.error(error);
});
};
The init function its:
$scope.init = function () {
$scope.detailCategory({id: $stateParams.categoryId});
$scope.showAddTask = false;
};
The html its:
<div class="all-tasks" ng-init="get()">
<div ng-show="user">
<p>Tasks from: <strong>{{user.username}}</strong></p>
</div>
<h3 class="margin-bottom-20" ng-show=(tasks|filter:{done:false}).length>Pending</h3>
<div ng-repeat="taskItem in tasks | filter:{done:false}" class="row row-margin button-show">
<div ng-hide="taskItem.is_editing">
<div class="inlineBlock">
<div ng-class="{'checkbox checkbox-circle': !user}">
<input type="checkbox" ng-hide="user" ng-change="edit(taskItem, true)" ng-model="taskItem.done">
<label class="lineBreak" ng-click="!user ? taskItem.is_editing = !taskItem.is_editing : false ">{{taskItem.name}}</label>
<span class="label label-success" ng-if="taskItem.in_progress">In progress</span>
<div class="label label-default">{{taskItem.category.name}}</div>
</div>
</div>
<div class="float-right margin-right-10">
<button type="button" class="btn btn-link btn-no-padding-top" ng-hide="user" ng-click="remove(taskItem, true)"><i class="fa fa-trash text-danger" aria-hidden="true"></i><span class="text-danger"> Delete</span> </button>
<div class="label label-primary" ng-hide="currentUser.is_superuser">Aggregate <span am-time-ago="taskItem.created_at"></span></div>
<div class="label label-primary" ng-hide="!currentUser.is_superuser">Agregada el <span>{{taskItem.created_at | amDateFormat:'D [de] MMMM [de] YYYY [a las] h:mm:ss a'}}</span></div>
<toggle-switch ng-model="taskItem.in_progress" ng-hide="user" class="switch-small switch-success show-hide" ng-change="edit(taskItem, true)" on-label="Si" off-label="No"><toggle-switch>
</div>
</div>
<div ng-if="taskItem.is_editing">
<form class="form" accept-charset="UTF-8" role="form" name="formEditTask{{taskItem.id}}" novalidate>
<div class="form-group">
<input type="text" class="form-control" ng-value="taskItem.name" focus-on-show="taskItem.is_editing" ng-model="taskItem.editName" name="task" placeholder="Task" ng-required="true" ng-blur="taskItem.is_editing = !taskItem.is_editing; taskItem.editName=''">
</div>
<button class="btn btn-primary btn-sm" ng-click="edit(taskItem, true)" ng-show="false">Edit</button>
</form>
</div>
</div>
When i modify the "if" all works but obviously the user doesn't show in the
Tasks from: {{user.username}}
The administrator only see the tasks http://i.imgur.com/GYKaP4y.png
I need this, like an user:
http://i.imgur.com/RPmIR2O.png

Related

Angular object not binding

I have the following issue. I have 2 controllers defined for 2 separate functions.
The 1st controller handle my login and the second 1 handles forgot password.
Login controller binds well but forgot password controller does bind but not the object.
Controllers
var singlePageApp = angular.module('SinglePageApp',[]);
singlePageApp.controller('LoginController', function ($scope, $location, $window) {
$scope.isFormValid = false;
$scope.message = null;
$scope.login = null;
// Login object
$scope.Login = {
Email: '',
Password: '',
};
//check form validation
$scope.$watch('LoginForm.$valid', function (newValue) {
$scope.isFormValid = newValue;
});
$scope.submitForm = function () {
console.log('Form is submitted with:', $scope.login);
...
};
});
singlePageApp.controller('ForgotPasswordController', function ($scope, $location, $window) {
$scope.message = null;
$scope.password = null;
// Password object
$scope.Password = {
Email: '',
};
$scope.$watchGroup(['password', 'Password'], function (newValues, oldValues, scope) {
console.log(newValues);
});
$scope.forgotPassword = function () {
};
});
Login HTML
<div ng-controller="LoginController">
<form class="form-signin mt10" name="LoginForm">
<h2 class="form-signin-heading pwc">Please login</h2>
<div class="login-wrap">
<input ng-model="login.Email" id="tbEmail" name="Email" type="email" class="form-control" placeholder="Email" autofocus required>
<span class="error" ng-show="LoginForm.Email.$touched && LoginForm.Email.$error.required">Email is required</span>
<input ng-model="login.Password" id="tbPassword" name="Password" type="password" class="form-control" placeholder="Password" required>
<span class="error" ng-show="LoginForm.Password.$touched && LoginForm.Password.$error.required">Password is required</span>
<label class="checkbox">
<span class="pull-right">
#* Forgot Password?*#
Forgot Password?
</span>
</label>
<div class="clearfix"></div>
<button id="btnloginAdmin" type="button" ng-click="submitForm()" ng-disabled="LoginForm.$invalid && !!LoginForm.$error.email" class="btn btn-success btn-block">Login</button>
<div class="text-center">
<label style="color: red;" id="lblError" class="hasError-label clearfix">{{message}}</label>
<div class="error error-red"></div>
</div>
</div>
</form>
</div>
HTML Modal
<div ng-controller="ForgotPasswordController">
<div aria-hidden="false" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" id="modalForgotPassword" class="modal fade">
<div class="modal-dialog">
<div class="modal-content" ng-form="fgForm">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Forgot Password ?</h4>
</div>
<div class="modal-body">
<p>Enter your e-mail address below to reset your password.</p>
<input type="email" name="Email" ng-model="password.Email"
placeholder="Email" autocomplete="off"
class="form-control placeholder-no-fix" required>
<span class="error" ng-show="fgForm.Email.$touched && fgForm.Email.$error.required">Email is required</span>
<div class="text-center">
<label style="color: red;" id="fError" class="hasError-label clearfix">{{message}}</label>
<div class="error error-red"></div>
</div>
</div>
<div class="modal-footer">
<a href="javascript:;" class="btn btn-success" ng-disabled="fgForm.$invalid && !fgForm.$error.email" ng-click="forgotPassword();">
<i class="fa fa-check"></i> | Submit
</a>
<a href="javascript:;" class="btn btn-danger" data-dismiss="modal">
<i class="fa fa-times"></i> | Cancel
</a>
</div>
</div>
</div>
</div>
I have tried changing to bind to a single object 'password' but it states its undefined. Then I changed it to 'Password.Email' but then it stays empty.
The 2 controllers are bind on the same page so not sure if that is the issue.
Thank you in advance.

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.

ng-model is not updating the right user in AngularJS

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>

How to get an html content in modal-body

I'm having trouble passing a html (form) for body modal.
Use the modal as a service, and have a standard template for the modal. If not past the template will of course use the default. And thus fail to repeat code.Then I wanted to go into the modal only the content that will be passed in scope.
modal.service.js
(function() {
var app = angular.module('app');
function ModalService($rootScope, $q, $modal) {
var defaultOptions = getModalDefaultOptions();
var service = {
showModal: showModal
};
return service;
function getModalDefaultOptions() {
return {
templateUrl: '/app/shared/modals/templates/modal.default.html',
closeButtonText: 'Fechar',
actionButtonText: 'OK',
headerTitle: 'Header default',
bodyContent: 'Conteúdo body modal',
showActionButton: true,
showCloseButton: true,
headerClass: ''
};
}
function showModal(customModalOptions) {
var deferred = $q.defer();
//Create temp objects to work with since we're in a singleton service
var tempModalOptions = {};
//Map modal.html $scope custom properties to defaults defined in service
angular.extend(tempModalOptions, defaultOptions, customModalOptions);
var scope = $rootScope.$new();
scope.modalOptions = tempModalOptions;
scope.modalOptions.ok = function(result) {
deferred.resolve();
modal.hide();
};
scope.modalOptions.close = function(result) {
deferred.reject();
modal.hide();
};
var modal = $modal({
scope: scope,
templateUrl: scope.modalOptions.templateUrl,
title: scope.modalOptions.headerTitle,
content: scope.modalOptions.bodyContent,
show: true
});
console.log(tempModalOptions);
return deferred.promise;
}
}
app.factory('ModalService', ModalService);
})();
modal.default.html
<div class="modal" role="dialog" tabindex="-1" data-type="Modal Default">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header" data-ng-class="modalOptions.headerClass" ng-show="title">
<button class="close" ng-click="modalOptions.close();" type="button">×</button>
<h4 class="modal-title" ng-bind="modalOptions.headerTitle"></h4>
</div>
<div class="modal-body" ng-bind="modalOptions.contentTemplate">{{modalOptions.contentTemplate}}</div>
<div class="modal-footer">
<button class="btn btn-default" data-ng-click="modalOptions.close();" data-ng-show="modalOptions.showCloseButton" type="button">
{{modalOptions.closeButtonText}}</button>
<button class="btn btn-primary" data-ng-click="modalOptions.ok();" data-ng-show="modalOptions.showActionButton">
{{modalOptions.actionButtonText}}</button>
</div>
</div>
</div>
</div>
entidades.controller.js
(function() {
'use strict';
var app = angular.module('app');
app.controller('EntidadesController', EntidadesController);
function EntidadesController(EntidadeService, ModalService) {
var vm = this;
vm.entidades = JSON.parse(EntidadeService.getAll());
vm.openEditEntidades = function() {
ModalService.showModal({
headerClass: 'danger',
contentTemplate: '/app/modulos/entidades/views/edit-entidades.html'
})
.then(function() {
alert('Alert Modal 2');
});
};
// console.log('Entidades onDemand');
}
})();
The view that calls the modal
<section ng-controller="EntidadesEditCtrl as ctrl">
<div class="modal-header">
<h3 class="modal-title">Editando entidade</h3>
</div>
<div class="row">
<div class="modal-body">
<form novalidate class="form-inline">
<div class="col-md-6">
<div class="form-group">
<label class="sr-only" for="fm_name">Email address</label>
<input class="form-control" id="fm_name" ng-model="vm.entidade.name" type="text">
</div>
<div class="form-group">
<label class="sr-only" for="fm_email">Email</label>
<input class="form-control" id="fm_email" ng-model="vm.entidade.email" type="email">
</div>
<div class="form-group">
<label class="sr-only" for="fm_sexo">Sexo</label>
<input class="form-control" id="fm_sexo" ng-model="vm.entidade.gender" type="text">
</div>
<div class="form-group">
<label class="sr-only" for="fm_companhia">Companhia</label>
<input class="form-control" id="fm_companhia" ng-model="vm.entidade.company" type="text">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="sr-only" for="fm_id">User ID</label>
<input class="form-control" id="fm_id" ng-model="vm.entidade._id" type="text">
</div>
<div class="form-group">
<label class="sr-only" for="fm_phone">Telefone</label>
<input class="form-control" id="fm_phone" ng-model="vm.entidade.phone" type="tel">
</div>
<div class="form-group">
<label class="sr-only" for="fm_endereco">Endereço</label>
<input class="form-control" id="fm_endereco" ng-model="vm.entidade.address" type="text">
</div>
<div class="checkbox">
<label>
<input type="checkbox" ng-model="vm.entidade.isActive">{{vm.entidade.isActive}}
</label>
</div>
</div>
</form>
</div>
</div>
<br>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ctrl.update(vm.entidade); vm.ok()" type="button">OK</button>
<button class="btn btn-warning" ng-click="vm.cancel()" type="button">Cancel</button>
</div>
</section>
and the content to be inserted into body-modal
<div class="row" ng-controller="EntidadesController as ectrl">
<div class="row text-center">
<h1>Gerenciar entidades</h1>
</div>
<hr>
<div class="row col-md-10 col-md-offset-1">
<table class="table table-striped" st-table="rowCollection">
<thead>
<div class="panel ">
<div class="panel-heading">
<button class="btn btn-default pull-right" ng-click="open()">Add</button>
<div class="clearfix"></div>
</div>
</div>
<tr>
<th>#</th>
<th>Nome</th>
<th>Compania</th>
<th>Telefone</th>
<th>email</th>
<th>ação</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="entidade in ectrl.entidades">
<td>{{entidade._id}}</td>
<td>{{entidade.name}}</td>
<td>{{entidade.company}}</td>
<td>{{entidade.phone}}</td>
<td>{{entidade.email}}</td>
<td>
<button class="btn btn-default" ng-click="ectrl.openEditEntidades(entidade)" type="button">
Editar
</button>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td class="text-center" colspan="5">
<div st-displayed-pages="7" st-items-by-page="itemsByPage" st-pagination=""></div>
</td>
</tr>
</tfoot>
</table>
</div>
</div>
Thanks for u time.
You should use ng-include to insert another template.
<div class="modal" role="dialog" tabindex="-1" data-type="Modal Default">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header" data-ng-class="modalOptions.headerClass" ng-show="title">
<button class="close" ng-click="modalOptions.close();" type="button">×</button>
<h4 class="modal-title" ng-bind="modalOptions.headerTitle"></h4>
</div>
<div class="modal-body" ng-include="modalOptions.contentTemplate"></div>
<div class="modal-footer">
<button class="btn btn-default" data-ng-click="modalOptions.close();" data-ng-show="modalOptions.showCloseButton" type="button">
{{modalOptions.closeButtonText}}</button>
<button class="btn btn-primary" data-ng-click="modalOptions.ok();" data-ng-show="modalOptions.showActionButton">
{{modalOptions.actionButtonText}}</button>
</div>
</div>
</div>
</div>

Angular 1.3 data binding not working

I'm running into some problems with Angular 1.3.2
I'm expecting to see the formData object being populated with whatever is being typed in the input fields
I have the following code.
angular.module('formApp', [])
.controller('FormController', function ($scope, $http) {
$scope.formData = {};
$scope.processForm = function () {
};
});
<div class="form-container" ng-app="formApp" ng-controller="FormController">
<div class="container">
<form>
<div id="name-group" class="form-group">
<label>Name</label>
<input type="text" name="name" class="form-control" placeholder="Bruce Wayne" ng-model="formData.name">
<span class="help-block"></span>
</div>
<div id="superhero-group" class="form-group">
<label>Superhero Alias</label>
<input type="text" name="superheroAlias" class="form-control" placeholder="Caped Crusader"
ng-model="formData.superheroAlias">
<span class="help-block"></span>
</div>
<button type="submit" class="btn btn-success btn-lg btn-block">
<span class="glyphicon glyphicon-flash"></span> Submit!
</button>
</form>
<pre>
{{ formData }}
</pre>
</div>
</div>
you have a typo in your ngcontroller syntax. it should be ng-controller
<div class="form-container" ng-app="formApp" ng-controller="FormController">
Copied your code and it is working, see below:
angular.module('formApp', [])
.controller('FormController', function ($scope, $http) {
$scope.formData = {};
$scope.processForm = function () {
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="form-container" ng-app="formApp" ng-controller="FormController">
<div class="container">
<form>
<div id="name-group" class="form-group">
<label>Name</label>
<input type="text" name="name" class="form-control" placeholder="Bruce Wayne" ng-model="formData.name">
<span class="help-block"></span>
</div>
<div id="superhero-group" class="form-group">
<label>Superhero Alias</label>
<input type="text" name="superheroAlias" class="form-control" placeholder="Caped Crusader"
ng-model="formData.superheroAlias">
<span class="help-block"></span>
</div>
<button type="submit" class="btn btn-success btn-lg btn-block">
<span class="glyphicon glyphicon-flash"></span> Submit!
</button>
</form>
<pre>
{{ formData }}
</pre>
</div>
</div>

Resources