Data edit - modal Bootstrap - angularjs

I have a problem with editing data in the bootstrap modal.
The problem is that in the modal, only first record from the database is displayed.
Modal only displays the problem because it retrieves data from 1 record.
Could it show me something wrong with the code, that it only gets 1 record for me?
My code AngularJS:
controllersAdmin.controller('linkEdit', function( $scope, $http, $routeParams, $timeout){
var linkID = $routeParams.id;
$scope.id = linkID;
$scope.link = function( link ){
$http({
method: 'GET',
url: 'api/admin/links/get/' + linkID,
}).then(function (response){
$scope.link = response.data.records;
},function (error){
console.log('Blad we wczytywaniu danych');
});
}
$scope.saveChanges = function( link ){
$http({
method: 'POST', url: 'api/admin/links/update/', data: {'link' : link}},
).then(function (){
$scope.success = true;
},function (error){
console.log('Blad we wczytywaniu danych');
});
}
});
<tr ng-repeat="link in link">
<td>{{$index+1}}</td>
<td>{{link.links | limitTo:50}}...</td>
<td>{{ link.login }}</td>
<td>{{link.password}}</td>
<td>{{link.date}}</td>
<td>
<button ng-click="deleteLink(link, $index)" class="btn btn-danger">×</button>
<button data-toggle="modal" ng-click="edtlnk(link)" data-target="#edit-data" class="btn btn-primary">Edit</button>
<div class="modal fade" id="edit-data" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<form method="POST" name="editlinke" role="form" ng-submit="saveChanges( link )">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Edit Item</h4>
</div>
<div class="modal-body">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6">
<div class="form-group">
<input type="text" class="form-control" ng-model="link.login">
<input type="text" class="form-control" ng-model="link.password">
<input type="text" class="form-control" ng-model="link.links">
</div>
</div>
</div>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>
</div>
</div>
</div>
</td>
</tr>

Related

Editing data in Modal in AngularJS

I have a problem with editing data in the bootstrap modal.
The problem is that in the modal, only first record from the database is displayed.
Modal only displays the problem because it retrieves data from 1 record.
My code AngularJS:
$scope.editLink = function( link ){
var linkdId = $routeParams.id;
$scope.id = linkdId;
$http({
method: 'get',
url: 'api/admin/links/get/' + linkdId
}).then(function (response){
$scope.edlink = response.data.records;
},function (error){
console.log('Blad we wczytywaniu danych');
});
}
View.html
Edit
<div class="modal fade" id="edit-data" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<form method="POST" name="editLinked" role="form" ng-submit="saveChanges( link )">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Edit Item</h4>
</div>
<div class="modal-body">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6">
<div class="form-group">
<input type="text" class="form-control" ng-model="edlink.login">
<input type="text" class="form-control" ng-model="edlink.password">
<input type="text" class="form-control" ng-model="edlink.links">
</div>
</div>
</div>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" ng-disabled="editLinked.$invalid" class="btn btn-primary create-crud">Submit</button>
</div>
</div>
</form>
</div>
</div>
</div>

AngularJS error when i am showing the user

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

Laravel /Angularjs Modal Save / Delete code does nothing on submit

I'm working on a laravel/angularjs app that uses a bootstrap modal to save/edit and delete records
I'm having a hard time understanding what i'm doing wrong, it does not save/edit the record and doesn't do anything when the submit button is clicked.
Below is my Modal code (I've shortened it), please tell me what you think is wrong?
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel">#{{form_title}}</h4>
</div>
<div class="modal-body">
<form name="AccountsForm" class="form-horizontal" novalidate="">
<div class="form-group">
<label for="account_name"
class="col-sm-3 control-label">Account Name</label>
<div class="col-sm-9">
<input type="text"
class="form-control "
id="account_name"
name="#{{account_name}}"
placeholder="Account Name"
value="account_name"
ng-model="account_name"
required="true">
<span class="help-inline"
ng-show="AccountsForm.account_name.$invalid && AccountsForm.account_name.$touched">Account number field is required
</span>
</div>
</div>
</div>
</div>
</div>
UPDATE
Adding app.controller JS code for saving/editing
//save new record / update existing record
$scope.save = function(modalstate, id) {
var url = API_URL + "accounts";
//append account id to the URL if the form is in edit mode
$scope.id = id;
if (modalstate === 'edit'){
url = "accounts/" + id;}
$http({
method: 'POST'
}).success(function(response) {
console.log(response);
location.reload();
});
}
So the code should look like this:
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel">#{{form_title}}</h4>
</div>
<div class="modal-body">
<form name="AccountsForm" class="form-horizontal" novalidate="">
<div class="form-group">
<label for="account_name"
class="col-sm-3 control-label">Account Name</label>
<div class="col-sm-9">
<input type="text"
class="form-control "
id="account_name"
name="account_name"
placeholder="Account Name"
value="#{{account_name}}"
ng-model="account.account_name"
required="true">
<span class="help-inline"
ng-show="AccountsForm.account_name.$invalid && AccountsForm.account_name.$touched">Account number field is required
</span>
</div>
</div>
</div>
</div>
//save new record / update existing record
$scope.save = function(modalstate, id) {
var url = API_URL + "accounts";
//append account id to the URL if the form is in edit mode
$scope.id = id;
if (modalstate === 'edit'){
url = "accounts/" + id;}
$http({
method: 'POST',
url: url,
data: $.param($scope.account),
headers: {'Content-Type': 'application/x-www-form-urlencoded'}
}).success(function(response) {
console.log(response);
location.reload();
});
}

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>

AngularJS: Passing data to modal from list

I am currently learning how to build a MEAN webapp from scratch. Stuff goes quite well until this point but now i am stuck at trying to pass data from my list (ng-repeat) to my modal via ng-click=updatePerson(person). I have absolutely no clue why I can't access the data from the list. I tried like 20 variants to link the data between both scopes without any success.
This is my Controller:
angular.module('userCtrl', ['userService','ui.bootstrap'])
.controller( 'userController', function(User, $uibModal, $log, $scope) {
var vm = this;
User.all().success( function(data) {
vm.users = data;
})
vm.deleteUser = function(id) {
User.delete(id).success(function(data) {
User.all().success(function(data) {
vm.users = data;
});
});
};
vm.createUser = function() {
User.create(vm.userData).success(function(data) {
vm.userData = {};
User.all().success(function(data) {
vm.users = data;
});
});
};
vm.updateUser = function(selectedUser) {
$scope.selectedUser = selectedUser;
var modalInstance = $uibModal.open({
animation: true,
templateUrl: 'app/views/pages/modal.html',
resolve: {
user: function () {
return $scope.selectedUser;
}
}
});
modalInstance.result.then(function(selectedUser) {
$scope.selected = selectedUser;
});
};
});
My angular-router:
angular.module('appRoutes', ['ngRoute'])
.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl : 'app/views/pages/home.html',
controller : 'userController',
controllerAs : 'user'
})
.when('/users', {
templateUrl : 'app/views/pages/user.html',
controller : 'userController',
controllerAs : 'user'
});
$locationProvider.html5Mode(true);
});
My list:
<div class="btn-group">
<button type="button" class="btn-lg btn-default glyphicon glyphicon-plus" data-toggle="modal" data-target="#createModal"></button>
<table class="table table-nonfluid table-bordered table-striped" ng-show="user.users">
<thead>
<tr>
<th></th>
<th>Vorname</th>
<th>Nachname</th>
<th>E-Mail</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="person in user.users">
<td><button ng-click="user.deleteUser(person._id)" class="btn btn-default btn-lg glyphicon glyphicon-trash"></button></td>
<td>{{person.firstname}}</td>
<td>{{person.lastname}}</td>
<td>{{person.mail}}</td>
<td><button ng-click="user.updateUser(person)" class="btn btn-default btn-lg glyphicon glyphicon-trash"></button></td>
<!--<td><button class="btn-lg btn-default glyphicon glyphicon-option-horizontal" data-toggle="modal" data-target="#updateModal"></button> </td>-->
</tr>
</tbody>
</table>
<!--Create Modal-->
<div class="modal fade bs-example-modal-lg" id="createModal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="exampleModalLabel">Neue Person</h4>
</div>
<form id="form1" ng-submit="user.createUser()">
<div class="modal-body">
<div class="form-group">
<label for="recipient-name" class="control-label">Vorname</label>
<input type="text" class="form-control" ng-model="user.userData.firstname">
</div>
<div class="form-group">
<label for="recipient-name" class="control-label">Nachname</label>
<input type="text" class="form-control" ng-model="user.userData.lastname">
</div>
<div class="form-group">
<label for="recipient-name" class="control-label">E-Mail</label>
<input type="text" class="form-control" ng-model="user.userData.mail">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Schließen</button>
<button id="button1" type="submit" class="btn btn-primary">Person erstellen</button>
</div>
</form>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$('#button1').click(function() {
$('#createModal').modal('hide');
});
</script>
And here is my modal:
<div class="modal-content bs-example-modal-lg" role="dialog document">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="exampleModalLabel">Ändere Person</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label for="recipient-name" class="control-label">Vorname</label>
<input type="text" class="form-control" ng-model="person.firstname" placeholder={{person.firstname}}>
</div>
<div class="form-group">
<label for="recipient-name" class="control-label">Nachname</label>
<input type="text" class="form-control" ng-model="person.firstname" placeholder={{person.lastname}}>
</div>
<div class="form-group">
<label for="recipient-name" class="control-label">E-Mail</label>
<input type="text" class="form-control" ng-model="person.firstname" placeholder={{person.mail}}>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Schließen</button>
<button id="button1" type="submit" class="btn btn-primary">Person ändern</button>
</div>
</div>
The user you're resolving won't be bound to the view automatically. You need a controller to do that. You can use the code below, or you can use controllerAs, but you'd have to update the modal's HTML accordingly.
vm.updateUser = function(selectedUser) {
$scope.selectedUser = selectedUser;
var modalInstance = $uibModal.open({
animation: true,
templateUrl: 'app/views/pages/modal.html',
resolve: {
user: function () {
return $scope.selectedUser;
}
},
controller: function($scope, user) {
$scope.user = user;
}
});
modalInstance.result.then(function(selectedUser) {
$scope.selected = selectedUser;
});
};

Resources