I need to display $post data in modal window. I am able to get data through my POST service and transfer result data to $scope.modalData. Now, I want to display this modalData should get displayed in the modal window with their values. I tried many ways to display it but unable to get any success. Please help me guyz.
toBeInitiated.jsp
<!-- <div img src="resources/images/spinner.jpg" ng-show='loading'> -->
<div class="col-md-1" > </div>
<div class="col-md-10">
<!-- <input type="button" id="btnExport" value=" Export Table data into Excel " onclick="exportToExcel()" /> -->
<!-- <button type="submit" class="btn btn-primary" id="btnExport" onclick="exportToExcel()">Export to Excel</button> -->
<!-- <button class="btn btn-link" id="btnExport" > --> <!-- ng-click="exportToExcel('#toBeInitiatedData')"> -->
</span> Export to Excel
<!-- </button> -->
<div class="data" id="toBeInitiatedData" data-ng-controller="tobeinitiatedCtrl" data-ng-init="toBeInitiatedOnLoad()">
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header" data-ng-init="modalOnLoad()">
<h3>Employee Details</h3>
</div>
<div class="modal-body">
Employee Id {{modaldata.empEmail}}
</div>
<div class="modal-footer">
<div class="btn btn-error">*If you click on Resend then this employee details will be deleted from the database.</div>
<button class="btn btn-primary" ng-click="ok()">Resend</button>
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>
</script>
<table class="table table-hover table-condensed">
<thead>
<tr>
<!-- <th>S.No.</th> -->
<!-- <th>Employee ID</th> -->
<th>
<a href="#" ng-click="sortType = 'EmpId'; sortReverse = !sortReverse" ng-model="initiatedFor">
Employee ID
<span ng-show="sortType == 'EmpId' && !sortReverse" class="fa fa-caret-down"></span>
<span ng-show="sortType == 'EmpId' && sortReverse" class="fa fa-caret-up"></span>
</a>
</th>
<!-- <th>Employee Name</th> -->
<th>
<a href="#" ng-click="sortType = 'EmpName'; sortReverse = !sortReverse" ng-model="empName">
Employee Name
<span ng-show="sortType == 'EmpName' && !sortReverse" class="fa fa-caret-down"></span>
<span ng-show="sortType == 'EmpName' && sortReverse" class="fa fa-caret-up"></span>
</a>
</th>
<!-- <th>Requested By</th> -->
<th>
<a href="#" ng-click="sortType = 'ReqBy'; sortReverse = !sortReverse" ng-model="initiatedBy">
Requested By
<span ng-show="sortType == 'ReqBy' && !sortReverse" class="fa fa-caret-down"></span>
<span ng-show="sortType == 'ReqBy' && sortReverse" class="fa fa-caret-up"></span>
</a>
</th>
<th>
<a href="#" ng-click="sortType = 'ReqDateParsed'; sortReverse = !sortReverse" ng-model="requestedDate">
Requested Date
<span ng-show="sortType == 'ReqDateParsed' && !sortReverse" class="fa fa-caret-down"></span>
<span ng-show="sortType == 'ReqDateParsed' && sortReverse" class="fa fa-caret-up"></span>
</a>
</th>
<th>Review Data</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr dir-paginate="x in names | orderBy:sortType:sortReverse | filter:query | itemsPerPage:10">
<!-- <td>{{x.SNo}}</td> -->
<td>{{x.initiatedFor}}</td>
<td>{{x.empName}}</td>
<td>{{x.initiatedBy}}</td>
<td>{{x.requestedDate | date: 'dd-MMM-yyyy'}}</td>
<td><button type="button" class="btn btn-link" ng-click="open(x)">View {{x.initiatedFor}}</button></td>
<td>
<select name="action" class="selectContainer actionSelect form-control" ng-model= "action"title="Select 1 action" width="50px">
<option value="resend">Resend</option>
<option value="initiate">Initiate</option>
</select>
</td>
<td><input type="checkbox" ng-model="confirmed" ng-click="toggleSelection(x,confirmed,initiate,initiatedFor)" value="{{x}}" /></td>
</tr>
</tbody>
</table>
<dir-pagination-controls max-size="10" direction-links="true" boundary-links="true"></dir-pagination-controls>
<button class="btn btn-primary pull-right" ng-click="resendIntitate()">Resend/Initiate</button>
</div>
<div>
<!-- <button class="btn btn-primary pull-right" ng-click="resendIntitate()">Resend/Initiate</button> -->
</div>
</div>
<div class="col-md-1"> </div>
<!-- </div> -->
app.js
$scope.open = function open (size) {
//alert(x);
$scope.modal=[];
$scope.modaldata=[];
$scope.modal = size;
$http({
url: 'fromModal',
method: "POST",
data:JSON.stringify($scope.modal),
headers: {'Content-Type': 'application/json'}
}).success(function (data, status, headers, config) {
console.log("success");
$scope.modaldata=data;
//$scope.loading = false;
//$scope.initiate = angular.copy(data);
//$scope.initiate.push(data);
//$scope.names=data;
//$scope.initiate = angular.copy($scope.names);
}).error(function (data, status, headers, config) {
console.log("failed");
});
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
size:$scope.modaldata,
resolve:{
names:function(){
return $scope.modaldata;
},
x:function(){
return size;
}
}
});
};
}]);;
app.controller('ModalInstanceCtrl', function ($scope,$http, $modalInstance, names,x) {
/*$scope.x = x;
$scope.names = names;*/
/*$scope.selected = {
name: $scope.names[0]
};*/
$scope.ok = function () {
$modalInstance.close("ok");
};
$scope.cancel = function () {
$modalInstance.dismiss("cancel");
};
});
The problem is is that the modal opens and tries to read $scope.modelData before it is loaded, you can put that $http call in the resolve of the modal, this way the modal will wait for the $http call to finish before opening.
Related
I want to implement a paging, using Jquery or angular in my application but I'm not sure how ... I'm getting the back end of it ..
my inforation is alredy filter by API i using this method
#RequestMapping( value = "/distritosPaginacao", params = { "page", "size" }, method = RequestMethod.GET)
public Page<Distritos> findPaginated( #RequestParam("page") int page, #RequestParam("size") int size) {
Page<Distritos> resultPage = distritosService.paginacao(page, size);
return resultPage;
}
and in my js i have this ...
app.controller("buscaDistritoController", function($scope, $http, $location) {
$scope.distritos = [];
$scope.distrito = {}; // binding com o form
carregarDistritos = function() {
token = localStorage.getItem("userToken");
var search = $location.search();
var page = search.page||0;
var size = search.size||15;
var sort = search.sort||'type,desc';
$http({
method: 'GET',
url: '/user/distritosPaginacao?page=' + page + '&size=' + size + '&sort=' + sort
}).then(function(response) {
$scope.distritos = response.data.content;
$scope.page = response.data.totalPages;
$scope.sort = sort;
}, function(response) {
console.log(response.data);
console.log(response.status);
});
};
});
my html
<div ng-controller="buscaDistritoController">
<div class="container">
<div class="col-md-12">
<div class="panel panel-primary">
<div class="panel-heading">
<h3>Distritos</h3>
<br></br>
<button id="btnSalvar" type="button" data-toggle="modal" data-target="#modalAdicionarDistrito" class="btn btn-default ">Adicionar novo distrito</button>
<button id="btnImprimir" type="button" class="btn btn-default pull-right ">Imprimir</button>
<div >
<div class=" jPager">
<div class="input-group col-lg-3 col-md-3 col-sm-3 col-xs-12 pull-left">
<select class="form-control" data-pager-action='pagesize'>
<option value="5">Ver 5</option>
<option value="15">Ver 15</option>
<option value="20">Ver 20</option>
<option value="25">Ver 25</option>
<option value="50">Ver 50</option>
<option value="100">Ver 100</option>
</select>
</div>
<div class="input-group col-lg-6 col-md-6 col-sm-6 col-xs-12">
<span class="input-group-addon btn btn-primary" data-pager-action='first'><i class="fa fa-angle-left"></i> Primeira</span>
<span class="input-group-addon btn btn-primary" data-pager-action='previous'><i class="fa fa-angle-double-left"></i> Anterior</span>
<input type="text" class="form-control" data-pager-action='pagenum'>
<span class="input-group-addon btn btn-primary" data-pager-action='next'><i class="fa fa-angle-double-right"></i> Próxima</span>
<span class="input-group-addon btn btn-primary" data-pager-action='last'><i class="fa fa-angle-right"></i> Última</span>
</div>
</div>
</div>
<div>
<div class="panel-body">
<table id="idTabela" class="table">
<thead>
<tr>
<th>Id</th>
<th>Nome</th>
<th>Código DNE</th>
<th>Opções</th>
</tr>
</thead>
<tbody ng-repeat="dis in distritos ">
<tr>
<td>{{dis.idDistrito}}</td>
<td>{{dis.nome}}</td>
<td>{{dis.codigoDne}}</td>
<td>
<div class="btn-group">
<button id="opcoes" type="button" class="btn btn-danger vermDigifred btn-xs dropdown-toggle glyphicon glyphicon-pencil" data-toggle="dropdown"> </button>
<ul class="dropdown-menu" role="menu">
<li><a id="btnExcluirRegistro" ng-click="excluirDistritos(dis)"><span class="glyphicon glyphicon-trash"></span> Excluir registro</a></li>
<li> <a id="btnAlterarRegistro" data-toggle="modal" data-target="#modalAlterarDistrito" ng-click="alterarDistritos(dis)" ><span class="glyphicon glyphicon-edit"></span> Alterar registro</a></li>
</ul>
</div>
</td>
</tr>
<tr>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
I have no idea how to implement the next and return buttons and also the buttons see results by pages.
can anybody help me? I'm not very experienced.
Trying to generate a dynamic URL for a hyper-link, so that users can navigate to a specific customer page by ID.
<template>
<list baseurl="/ajax/admin/customers" ordering="id" paginationOffset="20" inline-template>
<div class="row">
<loader :loading="loading"></loader>
<div class="col-sm-12" v-if="!loading">
<div class="row">
<div class="col-sm-6">
<h4>Showing {{ pagination.total }} results</h4>
</div>
<div class="col-sm-6 ">
<!--This button calls the openCanvas method which then triggers the open-canvas event-->
<button #click.prevent="openCanvas()"
class="btn btn-default pull-right" id="newCustomer">New Customer
</button>
</div>
</div>
<table class="table admin-table">
<thead>
<tr>
<th class="">
ID
<a><i class="mdi mdi-sort" aria-hidden="true"
#click.prevent="order('id')" :class="{active: (orderBy == 'id')}"></i>
</a>
</th>
<th class="">
Title
<a><i class="mdi mdi-sort" aria-hidden="true"
#click.prevent="order('first_name')"
:class="{active: (orderBy == 'first_name')}"></i>
</a>
</th>
<th class="hidden-xs">
Account
<a><i class="mdi mdi-sort" aria-hidden="true"
#click.prevent="order('account')"
:class="{active: (orderBy == 'account')}"></i>
</a>
</th>
<th class="hidden-xs">
Company
<a><i class="mdi mdi-sort" aria-hidden="true"
#click.prevent="order('company')"
:class="{active: (orderBy == 'company')}"></i>
</a>
</th>
<th class="hidden-xs">
Email
<a><i class="mdi mdi-sort" aria-hidden="true"
#click.prevent="order('email')"
:class="{active: (orderBy == 'email')}"></i>
</a>
</th>
<th class="hidden-xs">
Phone
<a><i class="mdi mdi-sort" aria-hidden="true"
#click.prevent="order('phone')" :class="{active: (orderBy == 'phone')}"></i>
</a>
</th>
<th class="">
City
<a><i class="mdi mdi-sort" aria-hidden="true"
#click.prevent="order('city')"
:class="{active: (orderBy == 'city')}"></i>
</a>
</th>
<th class="hidden-xs">
Country
<a> <i class="mdi mdi-sort" aria-hidden="true"
#click.prevent="order('country')"
:class="{active: (orderBy == 'country')}"></i>
</a>
</th>
<th class="">
Created
<a><i class="mdi mdi-sort" aria-hidden="true"
#click.prevent="order('created_at')"
:class="{active: (orderBy == 'created_at')}"></i>
</a>
</th>
</tr>
</thead>
<tbody>
<tr v-for="item in items" :key="item.id">
<td><a v-bind:href="generateCustomerUrl(item.id)" title="Navigate to Customer page">
{{ item.id }}
</a>
</td>
<td v-text="fullName(item)">
</td>
<td>
{{ item.type }}
</td>
<td>
{{ item.company }}
</td>
<td class="hidden-xs">
{{ item.email }}
</td>
<td class="hidden-xs">
{{ item.phone }}
</td>
<td class="hidden-xs">
{{ item.city }}
</td>
<td>
{{ item.country }}
</td>
<td class="hidden-xs">
{{ item.created }}
</td>
</tr>
</tbody>
</table>
<div class="row">
<div class="pagination-container">
<pagination :pagination="pagination" :offset="20"></pagination>
</div>
</div>
</div>
</div>
</list>
</template>
The function is declared in the module's methods
/**
* Private methods for this vue class
*
**/
methods: {
clearSearch() {
this.filters.search = '';
EventBus.fire('apply-filters', this.serializedFilter);
},
generateCustomerUrl(id) {
return "/admin/customers/" + id;
}
},
However vue js errors saying
vm.generateCustomerUrl is not a function Stack trace:
How can I generate a URL dynamically for Vue.js 2.0 without using interpolation (which is disabled).
The issue was due to component nesting in Vue.js, trying to call the parent component's methods whilst inside the scope of <list></list>
The solution was the pass the method as a property to the list component
e.g.
<list generateUrl=this.generateUrl></list>
I have a following controller:
controllersAdmin.controller( 'productCreate' , [ '$scope' , '$http' , '$timeout', 'checkToken', 'categoriesService', 'FileUploader', function( $scope , $http, $timeout, checkToken, categoriesService, FileUploader ){
$scope.product = {};
// get products
$http.post( 'api/admin/products/get', {
token: checkToken.raw()
}).then( function( data ){
$scope.products = data.data;
if($scope.products.length > 0) {
$scope.product['id'] = Number($scope.products[$scope.products.length-1].id)+1;
} else {
$scope.product['id'] = 1;
}
}, ( function(){
console.log( 'Error on communicate with API.' );
}));
// init uploader
var uploader = $scope.uploader = new FileUploader({
token: checkToken.raw(),
url: 'api/admin/images/upload/' + $scope.product['id']
});
In a template controlled by this controller i have following:
<h3>Upload product photo</h3>
<div ng-show="uploader.isHTML5">
<!-- 3. nv-file-over uploader="link" over-class="className" -->
<div class="well my-drop-zone" nv-file-over="" uploader="uploader">
Drag & drop photo here
</div>
</div>
<!-- Example: nv-file-select="" uploader="{Object}" options="{Object}" filters="{String}" -->
<input class="btn btn-default" type="file" nv-file-select="" uploader="uploader" multiple /><br/>
<table class="table">
<thead>
<tr>
<th width="50%">Name</th>
<th ng-show="uploader.isHTML5">Size</th>
<th ng-show="uploader.isHTML5">Progress</th>
<th>Status</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in uploader.queue">
<td>
<strong>{{ item.file.name }}</strong>
<!-- Image preview -->
<!--auto height-->
<!--<div ng-thumb="{ file: item.file, width: 100 }"></div>-->
<!--auto width-->
<div ng-show="uploader.isHTML5" ng-thumb="{ file: item._file, height: 100 }"></div>
<!--fixed width and height -->
<!--<div ng-thumb="{ file: item.file, width: 100, height: 100 }"></div>-->
</td>
<td ng-show="uploader.isHTML5" nowrap>{{ item.file.size/1024/1024|number:2 }} MB</td>
<td ng-show="uploader.isHTML5">
<div class="progress" style="margin-bottom: 0;">
<div class="progress-bar" role="progressbar" ng-style="{ 'width': item.progress + '%' }"></div>
</div>
</td>
<td class="text-center">
<span ng-show="item.isSuccess"><i class="glyphicon glyphicon-ok"></i></span>
<span ng-show="item.isCancel"><i class="glyphicon glyphicon-ban-circle"></i></span>
<span ng-show="item.isError"><i class="glyphicon glyphicon-remove"></i></span>
</td>
<td nowrap>
<button type="button" class="btn btn-success btn-xs" ng-click="item.upload()" ng-disabled="item.isReady || item.isUploading || item.isSuccess">
<span class="glyphicon glyphicon-upload"></span> Upload
</button>
<button type="button" class="btn btn-warning btn-xs" ng-click="item.cancel()" ng-disabled="!item.isUploading">
<span class="glyphicon glyphicon-ban-circle"></span> Cancel
</button>
<button type="button" class="btn btn-danger btn-xs" ng-click="item.remove()">
<span class="glyphicon glyphicon-trash"></span> Remove
</button>
</td>
</tr>
</tbody>
</table>
<div>
<div>
Queue progress:
<div class="progress" style="">
<div class="progress-bar" role="progressbar" ng-style="{ 'width': uploader.progress + '%' }"></div>
</div>
</div>
<button type="button" class="btn btn-success btn-s" ng-click="uploader.uploadAll()" ng-disabled="!uploader.getNotUploadedItems().length">
<span class="glyphicon glyphicon-upload"></span> Upload all
</button>
<button type="button" class="btn btn-warning btn-s" ng-click="uploader.cancelAll()" ng-disabled="!uploader.isUploading">
<span class="glyphicon glyphicon-ban-circle"></span> Cancel all
</button>
<button type="button" class="btn btn-danger btn-s" ng-click="uploader.clearQueue()" ng-disabled="!uploader.queue.length">
<span class="glyphicon glyphicon-trash"></span> Remove all
</button>
</div>
First I am getting data by $http.post from my API.
Then I initialize file uploader based on $scope.product['id'], however it shows me URL: api/admin/images/upload/undefined so $scope.product['id'] is undefined outside $http.post.
How do I access this variable after getting data from $http?
The $http.post method returns a promise because it is an asynchronous action.
Because of that you are initialization the uploader before the function inside the then is executed, so $scope.product['id'] still has an undefined value.
Try to initialize the uploader ($scope.uploader) inside the on fulfill function of the promise.
E.g:
$http.post( 'api/admin/products/get', {
token: checkToken.raw()
}).then( function( data ){
$scope.products = data.data;
if($scope.products.length > 0) {
$scope.product['id'] = Number($scope.products[$scope.products.length-1].id)+1;
} else {
$scope.product['id'] = 1;
}
var uploader = $scope.uploader = new FileUploader({
token: checkToken.raw(),
url: 'api/admin/images/upload/' + $scope.product['id']
});
}, (function(){
console.log( 'Error on communicate with API.' );
}));
To avoid getting an error because $scope.uploader is not yet defined (it's creation is delayed by the http call) you can use ng-if="uploader !== undefined" before using the upload directive.
I want to display data in HTML. First HTML disc-log.html looks like:
<div>
<h2>Discs</h2>
<jhi-alert></jhi-alert>
<div class="container-fluid">
<div class="row">
<div class="col-xs-4 no-padding-left">
<!--<button class="btn btn-primary" ui-sref="disc.new" >-->
<!--<span class="glyphicon glyphicon-plus"></span>-->
<!--<span >-->
<!--Create new Disc-->
<!--</span>-->
<!--</button>-->
</div>
</div>
</div>
<br/>
<div class="table-responsive">
<table class="jh-table table table-striped">
<thead>
<tr>
<!--<th><span>ID</span></th>-->
<th><span>Name</span></th>
<th><span>Connection</span></th>
<th></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="disc in vm.discs track by disc.id">
<!--<td><a ui-sref="disc-detail({id:disc.id})">{{disc.id}}</a></td>-->
<td>{{disc.name}}</td>
<td>
<a ui-sref="connection-detail({id:disc.connection.id})">{{disc.connection.userHost}}</a>
</td>
<td class="text-right">
<div class="btn-group flex-btn-group-container">
<button type="submit"
ui-sref="disc-detail({id:disc.id})"
class="btn btn-info btn-sm">
<span class="glyphicon glyphicon-eye-open"></span>
<span class="hidden-sm-down"></span>
</button>
<!--<button type="submit"-->
<!--ui-sref="disc.edit({id:disc.id})"-->
<!--class="btn btn-primary btn-sm">-->
<!--<span class="glyphicon glyphicon-pencil"></span>-->
<!--<span class="hidden-sm-down"></span>-->
<!--</button>-->
<button type="submit"
ui-sref="disc.delete({id:disc.id})"
class="btn btn-danger btn-sm">
<span class="glyphicon glyphicon-remove-circle"></span>
<span class="hidden-sm-down"></span>
</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
After open this website, all data is displayed. But when I copied the table to another file, then the table is empty. Why? Should I add something in controllers or services?
Disc Log Controller:
(function() {
'use strict';
angular
.module('deviceManagerApp')
.controller('DiscLogController', DiscLogController);
DiscLogController.$inject = ['$scope', '$state', 'DiscLog'];
function DiscLogController ($scope, $state, DiscLog) {
var vm = this;
vm.discLogs = [];
loadAll();
function loadAll() {
DiscLog.query(function(result) {
vm.discLogs = result;
vm.searchQuery = null;
});
}
}
})();
Github repository:
https://github.com/Ice94/DeviceManager
In controller you are adding result in discLogs variable vm.discLogs = result; and in html you are using discs variable in ng-repeat <tr ng-repeat="disc in vm.discs track by disc.id">
That is why it does not display anything. Try to use same variable.
Note: "yourControllerName as vm" should be in your ng-controller attribute or controllerAs: 'vm' in your routes if using router
The application is running on sails.js as backend and Angular as frontend,
It is CRUD application and there two pages, one is the main Dashboard and other is Search.html that have advanced search functionalities.
here the thing two pages, use identical ng-repeat that inject same html page which contain same function with same controller that use same service.
Here how it goes, I click on the delete button which fire showCancelQuoteModal(quote), then I click on the confirmation and fire ng-click=cancelQoute which pass decisionFrom without any problems.
now in cancelQouteModalCtrl both qoute and decisionForm are passed without a problem to qouteLogService, where qoute still there and qoutelog contain cancellationReason.
and qoute.post should return createdQouteLog but it doesn't in search .html and does in Dashboard.html
when I started tracking and watching the var, everything disappear when the code get in Angular.js and the following stack
$scope.apply() / $scope.digest() /$scope.eval() /processQueue()
here the table of Dashboard.html and search.html
<table class="table table-striped table-responsive" ui-jq="footable" data-filter="#filter19"
data-page-size="{{pageControl.pageSize}}">
<thead>
<tr>
<th data-type="date">Last Update</th>
<th>Client</th>
<th>Phone</th>
<th>Dealer</th>
<th>Assigned To</th>
<th data-type="numeric">Status</th>
<th>Progress</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="quote in allQuotes | orderBy: '-updatedAt' track by quote.id"
ng-init="latestQuoteLog=findLatestQuoteLog(quote.quoteLogs)">
<td class="text-center" data-value="{{latestQuoteLog.createdAt}}">
{{latestQuoteLog.createdAt | date : 'dd-MMM-yy hh:mm a'}}
</td>
<td>{{quote.client.name}}</td>
<td>{{quote.client.phone | tel}}</td>
<td ng-if="quote.dealershipCompany">{{quote.dealershipCompany.name}}</td>
<td ng-if="!quote.dealershipCompany">Online</td>
<td>{{username(latestQuoteLog.assignedTo)}}</td>
<td data-value="{{latestQuoteLog.status}}">
<span class="label bg-{{quoteStatusIdToStatusName[latestQuoteLog.status]}}">
{{quoteStatusPrettyNames[latestQuoteLog.status]}}
</span>
</td>
<td>
<div class="progress-xs progress ng-isolate-scope w-sm m-t-sm" type="info">
<div class="progress-bar progress-bar-primary" role="progressbar"
aria-valuenow="{{quoteStatusProgress[latestQuoteLog.status]}}" aria-valuemin="0"
aria-valuemax="100" ng-
style="width: {{quoteStatusProgress[latestQuoteLog.status]}}%;"></div>
</div>
</td>
<td>
<div class=" btn-group">
<button class="btn btn-sm btn-icon btn-default"
ng-if="latestQuoteLog.status != quoteStatus.quoteCancelled"
ng-click="showCancelQuoteModal(quote)">
<i class="glyphicon glyphicon-remove" tooltip="Cancel Quote"></i>
</button>
<button class="btn btn-sm btn-icon btn-default" ng-click="editQuote(quote)">
<i class="glyphicon glyphicon-edit" tooltip="Edit Quote"></i>
</button>
<button class="btn btn-sm btn-icon btn-default" ng-click="viewQuote(quote)">
<i class="glyphicon glyphicon-eye-open" tooltip="View Quote"></i>
</button>
<button class="btn btn-sm btn-icon btn-default"
ng-click="showModal(quote, roles.broker, 'AT', latestQuoteLog)"
ng-if="canAssign(latestQuoteLog, roles.broker)">
<i class="glyphicon glyphicon-arrow-right" tooltip="Assign To Broker"></i>
</button>
<button class="btn btn-sm btn-icon btn-default"
ng-click="showModal(quote, roles.processor, 'AT', latestQuoteLog)"
ng-if="canAssign(latestQuoteLog, roles.processor)">
<i class="glyphicon glyphicon-arrow-right" tooltip="Assign To Processor"></i>
</button>
<button class="btn btn-sm btn-icon btn-default" ng-click="showModal(quote, roles.broker, 'CA')"
ng-if="canChangeAssignee(latestQuoteLog, roles.broker)">
<i class="glyphicon glyphicon-transfer" tooltip="Change Assignee"></i>
</button>
<button class="btn btn-sm btn-icon btn-default"
ng-click="showModal(quote, roles.processor, 'CA')"
ng-if="canChangeAssignee(latestQuoteLog, roles.processor)">
<i class="glyphicon glyphicon-transfer" tooltip="Change Assignee"></i>
</button>
</div>
</td>
</tr>
</tbody>
<tfoot class="hide-if-no-paging">
<tr>
<td colspan="9" class="text-center">
<ul class="pagination"></ul>
</td>
</tr>
</tfoot>
</table>
here cancelModal
<script type="text/ng-template" id="cancelQuoteModal.html">
<div class="modal-header">
<form name="decisionForm" class="form-horizontal wrapper input-set">
<div class="col-md-10">
<label>
<h4 class="font-thin">Why it is not sold ?</h4>
</label>
<select class="form-control" ng-model="reasonForRejection" name="reasonForRejection" required>
<option ng-repeat="reason in rejectionReasons" value="{{reason}}">
{{reason}}
</option>
</select>
<small
ng-show="(decisionForm.reasonForRejection.$invalid && !decisionForm.reasonForRejection.$pristine) || showErrors"
class="b-light m-t-n-sm m-b font-thin text-danger m-r">Reason is required.
</small>
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-sm btn-success" ng-click="cancelQuote(decisionForm)">Confirm Quote Cancellation</button>
<button class="btn btn-warning" ng-click="cancelBox()">Close!</button>
</div>
</script>
Here CancelModalController
.controller('cancelQuoteModalCtrl', ['$scope', '$modalInstance', 'quoteLogService', 'rejectionReasons', 'quote', function ($scope, $modalInstance, quoteLogService, rejectionReasons, quote) {
$scope.rejectionReasons = rejectionReasons;
$scope.reasonForRejection;
$scope.cancelQuote = function (decisionForm) {
if (decisionForm.$invalid) {
$scope.showErrors = true;
} else {
quoteLogService.create(quote, {
'status': 'quoteCancelled',
'cancellationReason': $scope.reasonForRejection
}, function (createdQuoteLog) {
$modalInstance.close('Quote cancelled successfully!');
}, function (err) {
$modalInstance.dismiss('Error creating new quoteLog');
console.log('Error creating new quoteLog', err);
});
}
};
$scope.cancelBox = function () {
$modalInstance.close();
};
}]);
And here QouteLogService.js
QuoteLogModule
.factory('quoteLogService', ['$localStorage', '$state', 'LoggedInRestangular', function($localStorage, $state, LoggedInRestangular) {
return {
create: function(quote, quotelog, success, error) {
quote.post('quotelog', quotelog).then(function(createdQuoteLog) {
success(createdQuoteLog);
}, function(err) {
error(err);
});
},