i want to do something like this: When i fill in the deatils i.e name and password and click on login it should display the details With welcome message(in modal or popup in angular) that i have filled in the textbox . it should be simple. Can anyone help me with that. I had a look in UI bootstrap modal but i am not getting anything from that.
<div ng-controller="logincontroller">
<div class="container-fluid">
<form action="" method="" class="register-form">
<div class="row">
<div class="col-md-4 col-sm-4 col-lg-4">
<label for="firstName">NAME</label>
<input name="firstName" minlength="3" maxlength="15" required class="form-control firstname" type="text" >
</div>
</div>
<div class="row">
<div class="col-md-4 col-sm-4 col-lg-4">
<label for="password">PASSWORD</label>
<input name="password" required class="form-control password" type="password" >
</div>
</div>
<hr>
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-6 col-lg-6">
<button class="btn btn-default regbutton" ng-click="open()">Login</button>
<div class="modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Login</h4>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" ng-click="cancel()">No</button>
<button type="button" class="btn btn-primary" ng-click="ok()">Yes</button>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
my login.js file
var mymodule=angular.module("mymodule");
mymodule.controller("logincontroller",function($scope,$modal)
{
var modalInstance = $modal.open({
backdrop:'static',
keyboard:false,
controller: function($scope, $modalInstance) {
$scope.cancel = function() {
$modalInstance.dismiss('cancel');
};
$scope.ok = function () {
$modalInstance.close();
};
}
});
})
i am getting error like this
Error: $injector:unpr
Unknown Provider
Unknown provider: $modalProvider <- $modal <- logincontroller
Check this answer. It might help you out.
var app = angular.module('angularModal', ['ngAnimate', 'ui.bootstrap']);
app.controller('ModalDemoCtrl', function ($scope, $uibModal, $log) {
$scope.open = function (size) {
var modalInstance = $uibModal.open({
animation: $scope.animationsEnabled,
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
size: size,
resolve: {
firstName: function () {
return $scope.firstName;
}
}
});
};
});
// Please note that $modalInstance represents a modal window (instance) dependency.
// It is not the same as the $uibModal service used above.
app.controller('ModalInstanceCtrl', function ($scope, $modalInstance, firstName) {
setTimeout(function() {
$scope.$apply(function() {
$scope.firstName = firstName;
})
}, 1);
$scope.ok = function () {
$modalInstance.close($scope.firstName);
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
});
<!DOCTYPE html>
<html data-ng-app="angularModal">
<head>
<link data-require="bootstrap-css#3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.0.js"></script>
</head>
<body>
<div ng-controller="ModalDemoCtrl">
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3 class="modal-title">I'm a modal!</h3>
</div>
<div class="modal-body">
Welcome {{firstName}}
</div>
<div class="modal-footer">
<button class="btn btn-primary" type="button" ng-click="ok()">OK</button>
<button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
</div>
</script>
<div class="container-fluid">
<form method="" class="register-form">
<div class="row">
<div class="col-md-4 col-sm-4 col-lg-4">
<label for="firstName">NAME</label>
<input name="firstName" minlength="3" maxlength="15" required class="form-control firstname" type="text" ng-model="firstName">
</div>
</div>
<div class="row">
<div class="col-md-4 col-sm-4 col-lg-4">
<label for="password">PASSWORD</label>
<input name="password" required class="form-control password" type="password" >
</div>
</div>
<hr>
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-6 col-lg-6">
<button class="btn btn-default regbutton" ng-click="open()">Login</button>
</div>
</div>
</form>
</div>
</body>
</html>
Related
In the view {{phonenumber}} value is not updating. But When I enter digits alert is working properly inside the controller.
Controller
var app = angular.module('myApp', []);
app.controller('PosController', function ($scope, $http) {
$scope.phonenumberFromDial = "";
$scope.phonenumber = "";
$scope.updatePhoneNumber = function(id) {
$scope.phonenumberFromDial=id;
$scope.phonenumber =$scope.phonenumber+$scope.phonenumberFromDial;
if($scope.phonenumber.length > 9) {
console.log("Log phonenumber: " + $scope.phonenumberFromDial);
alert('Here the Number: '+ $scope.phonenumber);
}
});
View
<div ng-app="myApp" ng-controller="PosController" class="panel" >
<div class="input-group col-xs-4">
<div class="input-group-btn">
<button type="button" class="btn btn-success" data-toggle="modal" data-target="#myModal">Telefono</button>
</div><!-- /btn-group -->
<div ng-app="myApp" ng-controller="PosController">
<input id="phonenumber" class="form-control" ng-model="phonenumber" />
<!--<input type="text" id="phonenumber" ng-model="myModel" ng-keyup="(myModel.length >= 3) && myFunction()" class="form-control" data-inputmask='"mask": "(999) 999-9999"' data-mask>-->
</div>
<div class="input-group-btn" >
<button type="button" class="btn btn-success">Cliente</button>
</div><!-- /btn-group -->
<div ng-app="myApp" ng-controller="PosController">\
<input type="text" id="cliente" class="form-control" value="{{phonenumber}}">
</div>
</div>
</div>
Some observations :
remove unecessary multiple ng-controller="PosController" and ng-app="myApp" from the code and leave with only one at the top.
use ng-model="phonenumber" instead of value="{{phonenumber}}" to perform two way data binding.
Working demo :
var app = angular.module('myApp', []);
app.controller('PosController', function ($scope, $http) {
$scope.phonenumberFromDial = "";
$scope.phonenumber = "";
$scope.updatePhoneNumber = function(id) {
$scope.phonenumberFromDial=id;
$scope.phonenumber =$scope.phonenumber+$scope.phonenumberFromDial;
if($scope.phonenumber.length > 9) {
console.log("Log phonenumber: " + $scope.phonenumberFromDial);
alert('Here the Number: '+ $scope.phonenumber);
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="PosController" class="panel" >
<div class="input-group col-xs-4">
<input type="text" id="phonenumber" class="form-control" ng-model="phonenumber"/>
<div class="input-group-btn" >
<button type="button" class="btn btn-success" ng-click="updatePhoneNumber(phonenumber)">Cliente</button>
</div>
<input type="text" id="cliente" class="form-control" ng-model="phonenumber">
</div>
</div>
There are several things you're missing. First of the all, as suggested in comment, you only need to declare ng-app and ng-controller once in the HTML with np-app on the top-most level. Secondly, you bind the scope data to the HTML using ng-model inside a input field, or {{phonenumber}} in HTML. Third, you forgot to close the controller with an ending parenthesis.
Here is a working demo:
var app = angular.module('myApp', []);
app.controller('PosController', function ($scope, $http) {
$scope.phonenumberFromDial = "";
$scope.phonenumber = "";
$scope.updatePhoneNumber = function(id) {
$scope.phonenumberFromDial=id;
$scope.phonenumber =$scope.phonenumber+$scope.phonenumberFromDial;
if($scope.phonenumber.length > 9) {
console.log("Log phonenumber: " + $scope.phonenumberFromDial);
alert('Here the Number: '+ $scope.phonenumber);
}
}
});
<!doctype html>
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<script src="app.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/css/bootstrap-combined.min.css">
</head>
<body>
<div class="panel" >
<div class="input-group col-xs-4" ng-controller="PosController">
<div class="input-group-btn">
<button type="button" class="btn btn-success" data-toggle="modal" data-target="#myModal">Telefono</button>
</div><!-- /btn-group -->
<div>
<input id="phonenumber" class="form-control" ng-model="phonenumber" />
<!--<input type="text" id="phonenumber" ng-model="myModel" ng-keyup="(myModel.length >= 3) && myFunction()" class="form-control" data-inputmask='"mask": "(999) 999-9999"' data-mask>-->
</div>
<div class="input-group-btn" >
<button type="button" class="btn btn-success">Cliente</button>
</div><!-- /btn-group -->
<div>
<input type="text" id="cliente" class="form-control" ng-model="phonenumber">
</div>
<span>Phone#: {{phonenumber}}</span>
<div>
Dial: <input type="text" id="cliente" class="form-control" ng-model="phonenumberFromDial">
</div>
<div class="input-group-btn" >
<button type="button" class="btn btn-success" ng-click="updatePhoneNumber(phonenumberFromDial)">Update phone#</button>
</div><!-- /btn-group -->
</div>
</div>
</body>
</html>
I have a form inside a bootstrap modal.But I can't able to get the values of form on controller side with scope variable.
https://plnkr.co/edit/FjKXUpoBDdvQqomI97ml?p=preview
My original code has another problem also. when I click on submit button it will refresh the whole page and submit function is not executing.
My form:
<div class="modal-body">
<form class="form-horizontal" name="contact" ng-submit="contactForm()">
<div class="form-group">
<label class="col-lg-3 control-label">Name* :</label>
<div class="col-lg-8">
<input class="form-control" type="text" id="name" name="_name" ng-model="_name" > </div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Email* :</label>
<div class="col-lg-8">
<input class="form-control" type="email" id="email" name="_email" ng-model="_email" required> </div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Mobile* :</label>
<div class="col-lg-8 row">
<div class="col-lg-4">
<input type="text" class="form-control" ng-model="_cc" placeholder="+91" name="_cc"> </div>
<div class="col-lg-8">
<input class="form-control" type="text" ng-model="_mobile" maxlength="10" ng-pattern="/^[0-9]{5,10}$/" id="mobile" name="_mobile"></div>
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Message :</label>
<div class="col-lg-8">
<textarea class="form-control" rows="2" name="_condition" ng-model="_condition"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-7 col-lg-5">
<button type="submit" class="btn btn-primary" id="contactSubmit" >Submit</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div></div>
</form>
</div>
Controller:
$scope.contactForm = function(){
console.log($scope._condition,$scope._name,$scope._email,$scope._cc,$scope._mobile);
};
You are opening the modal using plain jQuery approach which is not going to work in Angular, because opened modal is not connected to Angular application, so it doesn't know that modal has to be handled, HTML parsed, etc.
Instead you should use directives properly, or in case of modal dialog you can simply use existent ones, like Angular UI project, which brings ready Bootstrap directives for Angular. In your case you need $modal service and inject the $http service to have your data posted.
Here is the working plunker using angular-ui bootstrap.
PLUNKER:https://plnkr.co/edit/rjtHJl0udyE0PTMQJn6p?p=preview
<html ng-app="plunker">
<head>
<script src="https://code.angularjs.org/1.2.18/angular.js"></script>
<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js"></script>
<script src="script.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="ModalDemoCtrl">
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3>I'm a modal!</h3>
</div>
<form ng-submit="submit()">
<div class="modal-body">
<label>Email address:</label>
<input type="email" ng-model="user.email" />
<label>Password</label>
<input type="password" ng-model="user.password" />
</div>
<div class="modal-footer">
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
<input type="submit" class="btn primary-btn" value="Submit" />
</div>
</form>
</script>
<button class="btn" ng-click="open()">Open Modal</button>
</div>
</body>
</html>
JS:
angular.module('plunker', ['ui.bootstrap']);
var ModalDemoCtrl = function ($scope, $modal, $log,$http) {
$scope.user = {
email: '',
password: null,
};
$scope.open = function () {
$modal.open({
templateUrl: 'myModalContent.html', // loads the template
backdrop: true, // setting backdrop allows us to close the modal window on clicking outside the modal window
windowClass: 'modal', // windowClass - additional CSS class(es) to be added to a modal window template
controller: function ($scope, $modalInstance, $log, user) {
$scope.user = user;
$scope.submit = function () {
$log.log('Submiting user info.'); // kinda console logs this statement
$log.log(user);
$http({
method: 'POST',
url: 'https://mytesturl.com/apihit',
headers: {
"Content-type": undefined
}
, data: user
}).then(function (response) {
console.log(response);
$modalInstance.dismiss('cancel');
}, function (response) {
console.log('i am in error');
$modalInstance.dismiss('cancel');
});
//$modalInstance.dismiss('cancel'); // dismiss(reason) - a method that can be used to dismiss a modal, passing a reason
}
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
},
resolve: {
user: function () {
return $scope.user;
}
}
});//end of modal.open
}; // end of scope.open function
};
I want to use the value of a radio button and implement that into an api link but its not linking for some reason.
heres my code
JS
myApp.controller('HomeController', ['$scope', '$http',
function($scope, $http) {
$scope.formData = {};
$scope.doIt = function() {
$scope.targetURL = ('https://api.api/' + $scope.formData + '/us/profile');
$http.get($scope.targetURL)
.success(function(results) {
$scope.data = results.data;
});
};
}
]);
HTML
<div class="container-fluid">
<div class="background">
<div class="transbox">
<div class="row">
<div class="col-lg-4">
</div>
<div class="col-lg-3">
<label><input type="radio" name='radio' value="pc" ng-model="formData"><img src="../img/battlenet.png"></label>
<label><input type="radio" name='radio' value="psn" ng-model="formData"><img src="../img/playstation.png"></label>
</div>
<div class="col-lg-5">
</div>
</div>
<div class="row">
<div class="col-lg-9">
<input class="form-control" type="text" placeholder="Enter Gamertag">
</div>
<div class="col-lg-3">
<button type="submit" class="btn btn-default" ng-click="doIt()"> Submit </button>
</div>
</div>
</div>
</div>
This works well fiddle:
myApp.controller('HomeController', ['$scope', '$http',
function($scope, $http) {
$scope.formData = {};
$scope.doIt = function() {
$scope.targetURL = ('https://api.api/' + $scope.formData + '/us/profile');
$http.get($scope.targetURL)
.success(function(results) {
$scope.data = results.data;
});
};
}
]);
And your HTML:
<div ng-app="myApp">
<div ng-controller="HomeController">
<div class="container-fluid">
<div class="background">
<div class="transbox">
<div class="row">
<div class="col-lg-4">
</div>
<div class="col-lg-3">
<label><input type="radio" name='radio' value="pc" ng-model="formData"><img src="../img/battlenet.png"></label>
<label><input type="radio" name='radio' value="psn" ng-model="formData"><img src="../img/playstation.png"></label>
</div>
<div class="col-lg-5">
</div>
</div>
<div class="row">
<div class="col-lg-9">
<input class="form-control" type="text" placeholder="Enter Gamertag">
</div>
<div class="col-lg-3">
<button type="submit" class="btn btn-default" ng-click="doIt()"> Submit </button>
</div>
</div>
</div>
</div>
</div>
</div>
I think you are not calling the controller, at least in your example it is not. If you check the network tab in the chrome console for the requests, you will see the correct data is sent:
https://api.api/pc/us/profile
https://api.api/psn/us/profile
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>
I have 2 tabs: list.brands and add.brand:
<script type="text/ng-template" id="list.brands">
<table class="table table-striped table-bordered bootstrap-datatable datatable dataTable" id="DataTables_Table_0" aria-describedby="DataTables_Table_0_info" ng-controller="BrandsCtrl">
<input type="text" ng-model="searchBox">
<thead>
<tr>
<th><tags:label text="brandid"/></th>
<th><tags:label text="name"/></th>
<th><tags:label text="isactive"/></th>
<th></th>
</tr>
</thead>
<tbody>
<tr id="actionresult{{$index + 1}}" ng-repeat="brand in brands | filter:searchBox">
<td>{{brand.brandid}}</td>
<td>{{brand.name}}</td>
<td>{{brand.isactive}}</td>
<td>
<a class="btn btn-ext-darkblue btn-ext-darkblue savestockbtn" ng-click="open(brand.brandid)"><tags:label text="edit"/></a>
<a class="btn btn-ext-darkblue btn-modal-trigger btn-ext-darkblue savestockbtn" href="/admin.brands/deleteConfirm?brandid={{brand.brandid}}" data-toggle="modal" ><tags:label text="delete"/></a>
</td>
</tr>
</tbody>
</table>
</script>
<script type="text/ng-template" id="add.brand">
<div class="row-fluid sortable">
<div class="box span12">
<div class="box-content">
<form class="form-horizontal" action='/admin.brands/add' data-toggle="modalform" data-popup="modal" name="brandform">
<div class="section-heading"></div>
<div class="control-group">
<label class="control-label" for="selectError"><tags:label text="name"/> *</label>
<div class="controls">
<input name="name" required/>
<span ng-show="brandform.name.$error.required"> Name is required. </span>
</div>
</div>
<div class="control-group">
<label class="control-label" for="selectError"><tags:label text="isactive"/> </label>
<div class="controls">
<input type="checkbox" name="isactive" value="1">
</div>
</div>
<div class="section-heading"><tags:label text="logo"/></div>
<div class="control-group">
<label class="control-label" for="textarea2"></label>
<div class="controls">
<template:file.upload dropzoneWidth="200px" dropzoneHeight="160px" maxFiles="1"></template:file.upload>
</div>
</div>
<div class="form-actions">
<tags:label text="close"/>
<button ng-disabled="brandform.name.$invalid" type="submit" class="btn btn-ext-lightblue"><tags:label text="save"/></button>
</div>
</form>
</div>
</div>
</div>
</script>
I switch them with
<div class="content-header">
<div class="row">
<div class="content-name span4">
<h3><i class="glyphicon glyphicon-bold"></i><tags:label text="brands"/></h3>
</div>
<div class="span8 button-group">
<jsp:include page="/admin/jsp/screens/help-button-inc.jsp"></jsp:include>
</div>
</div>
</div>
<div ng-app="myApp" ng-controller="TabsCtrl">
<div id="tabs" >
<ul class="nav nav-tabs content-tab-header" id="content_tab_0">
<li ng-repeat="tab in tabs" ng-class="{active:isActiveTab(tab.url)}" ng-click="onClickTab(tab)"><a><i class="{{tab.cssClass}}"></i><tags:label text="{{tab.title}}"/></a></li>
</ul>
</div>
<div id="mainView">
<div ng-include="currentTab"></div>
</div>
At list, I can open a modal window that contains brand details by clicking edit button in list.brands. My modal window:
<div class="row-fluid sortable">
<div class="box span12">
<div class="box-content">
<form class="form-horizontal" name="brandform" action='/admin.brands/update' data-toggle="validate" method="post">
<fields:form formName="brand.id.form">
<input type="hidden" name="brandid" value="{{item.brandid}}"/>
</fields:form>
<fields:form formName="brand.form">
<div class="section-heading"></div>
<div class="control-group">
<label class="control-label" for="selectError"><tags:label text="name"/> *</label>
<div class="controls">
<input name="name" value="{{item.name}}" required/>
</div>
</div>
<div class="control-group">
<label class="control-label" for="selectError"><tags:label text="isactive"/> </label>
<div class="controls">
<input type="checkbox" ng-checked="item.isactive" name="isactive" value="1"/>
</div>
</div>
</fields:form>
<div class="form-actions">
<a ng-click="cancel()" class="btn btn-ext-lightblue"><tags:label text="close"/></a>
<a ng-click="ok()" class="btn btn-ext-darkblue btn-disable-on-submit" ><tags:label text="save"/></a>
</div>
</form>
</div>
</div>
</div>
and my app is here:
<script>
var app = angular.module('myApp', ['ui.bootstrap']);
app.controller("BrandsCtrl", function($scope, $http, $controller) {
$http.get('/admin.brands/getJSONDataOfSearch').
success(function(data, status, headers, config) {
$scope.brands = data;
}).
error(function(data, status, headers, config) {
});
angular.extend(this, $controller("BrandCtrl", {$scope: $scope}));
});
app.controller("BrandCtrl", function ($scope, $http, $modal) {
$scope.animationsEnabled = true;
$scope.open = function (id) {
var modalInstance = $modal.open({
animation: $scope.animationsEnabled,
templateUrl: '/admin.brands/edit',
controller:gg,
resolve: {
item: function($http) {
return $http.get('/admin.brands/getJsonBrandAndEdit?brandid=' + id)
.then(function(response) {
return response.data;
});
}
}
});
}
});
var gg = function ($scope, $modalInstance, item) {
$scope.item = item;
$scope.ok = function () {
$scope.form.brandform.submit();
$modalInstance.close();
};
$scope.cancel = function () {
$modalInstance.dismiss();
};
}
app.controller('TabsCtrl', ['$scope', function ($scope) {
$scope.tabs = [{
title: 'list.brands',
url: 'list.brands',
cssClass: 'icon-th-list'
}, {
title: 'add.brand',
url: 'add.brand',
cssClass: 'icon-plus'
}];
$scope.currentTab = 'list.brands';
$scope.onClickTab = function (tab) {
$scope.currentTab = tab.url;
}
$scope.isActiveTab = function(tabUrl) {
return tabUrl == $scope.currentTab;
}
}]);
</script>
My questions is; how can I submit my edit form in modal to a target URL and refresh the list of brands.
in angular, form has a in-built event called ng-submit. You can submit the form in either way via submit button or using enter key. on ng-submit event, you need to pass a function which must be written within your controller. in that controller you can do what ever you want to do. To use a service, go through the documentation.
Here I am attaching an working example of Form Submit with Service integrated in it (Just for your reference, I have added 2 different controllers which are sharing the same service):
Fiddle: http://jsfiddle.net/ashishanexpert/zvcx5z38/2/
I think this could help you. Thanks
$scope.open = function (id) {
var modalInstance = $modal.open({
animation: $scope.animationsEnabled,
templateUrl: '/admin.brands/edit',
controller:gg,
resolve: {
item: function($http) {
return $http.get('/admin.brands/getJsonBrandAndEdit?brandid=' + id)
.then(function(response) {
return response.data;
});
}
}
});
modalInstance.result.then(function (item) {
//The function that load your data in this controller
LoadData();
})
}