Mo.
Reputation: 27455
In AngularJs How to merge a function as universal to use for varies controller?
The web application using the same Edit, Delete and Update function in various part of the web application controller. Is there any solution to use these functions as global to for all controllers ?
$scope.newEmi = function(){
$scope.editEmi = function(id)
$scope.addEmi = function(){
$scope.deleteEmi = function(id)
functions as global function() in the AngularJs
Demo: http://codepen.io/anon/pen/OVQQJB
Here is one of the example of the web app controller function
(function() {
var app = angular.module('myApp', []);
app.controller('loanController', function($scope) {
$scope.loanedit = false;
$scope.emiedit = false;
$scope.banks = [{
"id": 1,
"name": "PNB",
"branchcode": "13-35-96",
"ifsc": 989525621542,
"micr": 1324586468,
"swift": 99944422258,
"contact": "0483-569821",
"branch": 'Manjeri',
"address": {
"line1": "bank addres line 1",
"line2": "Banks address line 2"
}
}, {
"id": 2,
"name": "ICICI Banks",
"ifsc": 989525621542,
"branchcode": "13-35-96",
"micr": 1324586468,
"swift": 99944422258,
"contact": "0483-569821",
"branch": 'Calicut',
"address": {
"line1": "bank addres line 1",
"line2": "Banks address line 2"
}
}, {
"id": 3,
"name": "SBT",
"ifsc": 989525621542,
"branchcode": "13-35-96",
"micr": 1324586468,
"swift": 99944422258,
"contact": "0483-569821",
"branch": 'Pandikkad',
"address": {
"line1": "bank addres line 1",
"line2": "Banks address line 2"
}
}];
$scope.loans = [{
"id": 1,
"bank_id": 1,
"name": "Bike Loan",
"description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut dolores, aut itaque accusantium laborum sapiente.",
"amount": 10000,
"paid": 5000,
"balance": 5000,
"date": "12-May-2015",
"closedate": "20-March-2018",
"interest": "12%",
}, {
"id": 2,
"bank_id": 3,
"name": "Hosing loan",
"description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut dolores, aut itaque accusantium laborum sapiente.",
"amount": 7000,
"paid": 3000,
"balance": 4000,
"date": "12-May-2015",
"closedate": "20-March-2018",
"interest": "11%",
}, {
"id": 3,
"bank_id": 2,
"name": "Vehicle Loan",
"description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut dolores, aut itaque accusantium laborum sapiente.",
"amount": 50000,
"paid": 1200,
"balance": 38000,
"date": "12-May-2015",
"closedate": "20-March-2018",
"interest": "9.5%",
}];
$scope.newaccount = {};
$scope.newLoan = function() {
$scope.newloan = {};
};
$scope.editLoan = function(id) {
$scope.loanedit = true;
for (var i = 0; i < $scope.loans.length; i++) {
if ($scope.loans[i].id == id) {
$scope.newloan = angular.copy($scope.loans[i]);
}
}
};
// TODO unique ID for new loan
$scope.addLoan = function() {
if ($scope.newloan.id == null) {
$scope.newloan.id = $scope.loans.length + 1;
$scope.loans.push($scope.newloan);
} else {
for (var i = 0; i < $scope.loans.length; i++) {
if ($scope.loans[i].id == $scope.newloan.id) {
$scope.loans[i] = $scope.newloan;
}
}
}
$scope.newloan = {};
$scope.loanedit = false;
};
$scope.deleteLoan = function(id) {
for (var i = 0; i < $scope.loans.length; i++) {
if ($scope.loans[i].id == id) {
var confirmDelete = confirm("Do you really need to delete " + $scope.loans[i].name + "?");
if (confirmDelete) {
$scope.loans.splice(i, 1);
}
}
}
};
$scope.emis = [{
"id": 1,
"loan_id": 1,
"amount": 4500,
"description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla reprehenderit quisquam suscipit nesciunt exe",
"date": "12-March-1999"
}, {
"id": 2,
"loan_id": 1,
"amount": 900,
"description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima dolores sapiente provident accusantium natu",
"date": "01-May-2015"
}, {
"id": 3,
"loan_id": 2,
"amount": 1900,
"description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque laudantium iste quae deserunt itaque recusan",
"date": "03-February-2015"
}, {
"id": 3,
"loan_id": 3,
"amount": 1900,
"description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus error odio autem, voluptatibus perferendi",
"date": "03-February-2015"
}, {
"id": 4,
"loan_id": 3,
"amount": 1900,
"description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse, laborum. Ipsum, facilis deleniti nam atque a",
"date": "03-February-2015"
}, {
"id": 5,
"loan_id": 3,
"amount": 1900,
"description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum facere sapiente ex totam tenetur, aspernatur, ",
"date": "03-February-2015"
}, {
"id": 6,
"loan_id": 3,
"amount": 1900,
"description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates recusandae veniam iure architecto exerc",
"date": "03-February-2015"
}, {
"id": 7,
"loan_id": 3,
"amount": 1900,
"description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto harum qui ipsam inventore modi molestia",
"date": "03-February-2015"
}, {
"id": 8,
"loan_id": 3,
"amount": 1900,
"description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo numquam, iure, perferendis ipsum ipsa odit asp",
"date": "03-February-2015"
}, {
"id": 9,
"loan_id": 3,
"amount": 1900,
"description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo quam veniam ea nemo, nobis dignissimos. Molest",
"date": "03-February-2015"
}, {
"id": 10,
"loan_id": 3,
"amount": 1900,
"description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem rem enim, architecto voluptate quidem ad dol",
"date": "03-February-2015"
}, {
"id": 11,
"loan_id": 3,
"amount": 1900,
"description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima velit ad natus assumenda, at illo, nulla il",
"date": "03-February-2015"
}, {
"id": 12,
"loan_id": 3,
"amount": 1900,
"description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam, quibusdam minima quos exercitationem fugiat ",
"date": "03-February-2015"
}, {
"id": 13,
"loan_id": 3,
"amount": 1900,
"description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure repudiandae adipisci officia vitae odit moles",
"date": "03-February-2015"
}, {
"id": 14,
"loan_id": 3,
"amount": 1900,
"description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo nostrum perferendis repellat voluptates sapien",
"date": "03-February-2015"
}, {
"id": 15,
"loan_id": 3,
"amount": 1900,
"description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia placeat, labore pariatur odio doloribus est n",
"date": "03-February-2015"
}, {
"id": 16,
"loan_id": 3,
"amount": 1900,
"description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident inventore itaque beatae dicta eligendi n",
"date": "03-February-2015"
}, {
"id": 17,
"loan_id": 3,
"amount": 1900,
"description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque magni quaerat provident rerum sapiente,",
"date": "03-February-2015"
}, {
"id": 18,
"loan_id": 3,
"amount": 1900,
"description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae, corrupti, laborum? Ipsa maiores labori",
"date": "03-February-2015"
}, {
"id": 19,
"loan_id": 3,
"amount": 1900,
"description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo tempore, cum ad, dicta omnis dignissimos amet",
"date": "03-February-2015"
}, {
"id": 20,
"loan_id": 3,
"amount": 1900,
"description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam accusamus esse, facere veniam. Non tenetur",
"date": "03-February-2015"
}, {
"id": 21,
"loan_id": 3,
"amount": 1900,
"description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt laboriosam, eligendi, earum, minus et inc",
"date": "03-February-2015"
}, {
"id": 22,
"loan_id": 3,
"amount": 1900,
"description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum voluptate totam dolor commodi ipsa ducimus",
"date": "03-February-2015"
}, {
"id": 23,
"loan_id": 3,
"amount": 1900,
"description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim omnis dolorem voluptas minima neque impedit q",
"date": "03-February-2015"
}, {
"id": 24,
"loan_id": 3,
"amount": 1900,
"description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere quisquam nihil repellendus officia error cu",
"date": "03-February-2015"
}];
$scope.newEmi = function() {
$scope.newemi = {};
};
$scope.editEmi = function(id) {
$scope.emiedit = true;
for (var i = 0; i < $scope.emis.length; i++) {
if ($scope.emis[i].id == id) {
$scope.newemi = angular.copy($scope.emis[i]);
}
}
};
// TODO unique ID for new loan
$scope.addEmi = function() {
if ($scope.newemi.id == null) {
$scope.newemi.id = $scope.emis.length + 1;
$scope.emis.push($scope.newemi);
} else {
for (var i = 0; i < $scope.emis.length; i++) {
if ($scope.emis[i].id == $scope.newemi.id) {
$scope.emis[i] = $scope.newemi;
}
}
}
$scope.newemi = {};
$scope.emiedit = false;
};
$scope.deleteEmi = function(id) {
for (var i = 0; i < $scope.emis.length; i++) {
if ($scope.emis[i].id == id) {
var confirmDelete = confirm("Do you really need to delete ?");
if (confirmDelete) {
$scope.emis.splice(i, 1);
}
}
}
};
});
})();<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div class="container" ng-controller="loanController">
<div class="row">
<div class="col-md-12">
<div class="box">
<button type="button" class="btn btn-primary pull-right" ng-hide="loanedit" ng-click="loanedit = true; newLoan();">
<i class="fa fa-plus"></i> Add loan
</button>
<!-- <pre>{{loans | json}}</pre> -->
<form class="form-horizontal" ng-submit="addLoan()" ng-show="loanedit">
<h3>New Loan</h3>
<br>
<div class="form-group">
<label class="col-sm-2 control-label">Loan name</label>
<div class="col-sm-5">
<input type="text" class="form-control" ng-model="newloan.name" placeholder="Loan name" required>
</div>
<label class="col-sm-1 control-label">Bank</label>
<div class="col-sm-2">
<select ng-model="newloan.bank_id" ng-options="bank.id as bank.name for bank in banks" class="form-control" required></select>
</div>
<label class="col-sm-1 control-label">Interest</label>
<div class="col-sm-1">
<input type="text" ng-model="newloan.interest" class="form-control">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Amount</label>
<div class="col-sm-2">
<input type="text" class="form-control" ng-model="newloan.amount" placeholder="Amount" required>
</div>
<label class="col-sm-1 control-label">Paid</label>
<div class="col-sm-3">
<input type="text" class="form-control" ng-model="newloan.paid" placeholder="Paid">
</div>
<label class="col-sm-1 control-label">Due</label>
<div class="col-sm-3">
<input type="text" class="form-control" ng-model="newloan.balance" placeholder="Due">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Description</label>
<div class="col-sm-6">
<input type="text" class="form-control" ng-model="newloan.description" placeholder="Description">
</div>
<label class="col-sm-1 control-label">Close date</label>
<div class="col-sm-3">
<input type="text" class="form-control" ng-model="newloan.closedate" placeholder="Close date">
</div>
</div>
<div class="form-group">
<div class="col-md-12 text-right">
<button type="button" class="btn btn-default" ng-click="loanedit = false;">Cancel</button>
<button type="submit" class="btn btn-primary">Save</button>
</div>
</div>
<hr>
</form>
<h3>Loans and details</h3>
<table class="table table-hover table-responsive">
<thead>
<tr>
<th> </th>
<th>Name</th>
<th>Amount</th>
<th>Interest</th>
<th>Paid</th>
<th>Due</th>
<th>Date</th>
<th>Close date</th>
<th>Edit</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="loan in loans">
<td>{{$index+1}}</td>
<td><a>{{loan.name}}</a>
</td>
<td><i class="fa fa-inr"></i> {{loan.amount}}</td>
<td>{{loan.interest}}</td>
<td><i class="fa fa-inr"></i> {{loan.paid}}</td>
<td><i class="fa fa-inr"></i> {{loan.balance}}</td>
<td>{{loan.date}}</td>
<td>{{loan.closedate}}</td>
<td>
<div class="btn-group btn-group-xs" role="group" ng-init="editmode=false">
<button type="button" class="btn btn-default" ng-hide="editmode" ng-click="editLoan(loan.id);">
<i class="glyphicon glyphicon-pencil"></i>
</button>
<button type="button" class="btn btn-default" ng-hide="editmode" ng-click="deleteLoan(loan.id); editmode = !editmode">
<i class="glyphicon glyphicon-trash"></i>
</button>
<button type="button" class="btn btn-default" ng-show="editmode" ng-click="editmode = !editmode">
<i class="fa fa-check"></i>
</button>
<button type="button" class="btn btn-default" ng-show="editmode" ng-click="editmode = !editmode">
<i class="fa fa-times"></i>
</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="col-md-12">
<div class="box">
<button type="button" class="btn btn-primary pull-right" ng-hide="emiedit" ng-click="emiedit = true; newLoan();">
<i class="fa fa-plus"></i> Add EMI
</button>
<form class="form-horizontal" ng-submit="addEmi()" ng-show="emiedit">
<h3>New EMI</h3>
<div class="form-group">
<label class="col-sm-2 control-label">Loan name</label>
<div class="col-sm-4">
<input type="text" class="form-control" ng-model="newemi.amount" placeholder="Amount" required>
</div>
<label class="col-sm-1 control-label">Loan</label>
<div class="col-sm-2">
<select ng-model="newemi.bank_id" ng-options="loan.id as loan.name for loan in loans" class="form-control" required></select>
</div>
<label class="col-sm-1 control-label">Date</label>
<div class="col-sm-2">
<input type="text" ng-model="newemi.date" class="form-control">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Description</label>
<div class="col-sm-10">
<textarea class="form-control" ng-model="newemi.description" placeholder="Description"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-md-12 text-right">
<button type="button" class="btn btn-default" ng-click="emiedit = false;">Cancel</button>
<button type="submit" class="btn btn-primary">Save</button>
</div>
</div>
<hr>
</form>
<h3>Loan EMI</h3>
<table class="table table-hover table-responsive">
<thead>
<tr>
<th> </th>
<th>Description</th>
<th>Amount</th>
<th>Date</th>
<th>Edit</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="emi in emis">
<td>{{$index+1}}</td>
<td>{{emi.description}}</td>
<td><i class="fa fa-inr"></i> {{emi.amount}}</td>
<td>{{emi.date}}</td>
<td>
<div class="btn-group btn-group-xs" role="group" ng-init="editmode=false">
<button type="button" class="btn btn-default" ng-hide="editmode" ng-click="editEmi(emi.id);">
<i class="glyphicon glyphicon-pencil"></i>
</button>
<button type="button" class="btn btn-default" ng-hide="editmode" ng-click="deleteEmi(emi.id); editmode = !editmode">
<i class="glyphicon glyphicon-trash"></i>
</button>
<button type="button" class="btn btn-default" ng-show="editmode" ng-click="editmode = !editmode">
<i class="fa fa-check"></i>
</button>
<button type="button" class="btn btn-default" ng-show="editmode" ng-click="editmode = !editmode">
<i class="fa fa-times"></i>
</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>Upvotes: 0
Views: 65
Answers (2)
özgür kara
Reputation: 79
you can use $rootScope for this. $rootScope data always permanent!!!
app.run(['$rootScope', function ($rootScope) {
$rootScope.deleteEmi = function (id) {
for (var i = 0; i < $rootScope.emis.length; i++) {
if ($rootScope.emis[i].id == id) {
var confirmDelete = confirm("Do you really need to delete ?");
if (confirmDelete) {
$rootScope.emis.splice(i, 1);
}
}
}
};
}]);
Upvotes: 0
Andrew Gray
Reputation: 3790
In your case, I'd refactor these special methods down to a service...
(function () {
'use strict';
angular.module('app').factory('crudService', [crudService]);
function crudService() {
var service = {
addThing: function () {
// Add a thing!
},
// Same for those other commonly-used functions
};
return service;
}
})();
...Which can be included in your controllers as a dependency like so:
(function () {
'use strict';
angular.module('app').controller('someController', ['crudService', someController]);
function someController(crudService) {
var vm = this;
// Other things...
vm.add = add;
// Other method wrappers...
function add() {
// Pretty much, this function is just a wrapper.
crudService.addThing();
}
// Other wrappers...
}
})();
This is the entire point of services, in fact. Happy refactoring!
Upvotes: 1
Related Questions
- Reuse function in two different controllers in angularJS
- AngularJS Using Function in Multiple Controllers
- Angular: reusable function within a controller scope
- How to make common method with respect to scope in angularjs
- AngularJS function available to multiple controllers
- how to share functions across controllers in angular js
- Combining common function in controllers AngularJS
- Share scope function between controllers
- how do i share a function between controllers?
- Make Angular functions available to all controllers