CheckBox function for same ss billing sddress - angularjs

i know its very common and very easy thing but really i m very new to angularjs and need your help
My View Page:
<div ng-controller="AddressController">
<div class="form-part-title" ng-show="Caption">{{Caption}} <span ng-show="showSameAsBilling" class="spancheck"><input type="checkbox" id="SameAsBilling" ng-model="Address.SameAsBilling"><label class=" after">Same As Billing Address</label></span> </div>
<div ng-show="!readOnly">
<label class="required">#Resource.Country<span ng-show="showInvalidAddress" class="spancheck"><input type="checkbox" id="InvalidAddress" ng-model="Address.InvalidAddress"><label class="after">Invalid Address</label></span>
<span ng-show="showPostalOnly" class="spancheck"><input type="checkbox" id="PostalOnly" ng-model="Address.PostalOnly"><label class="after">Postal Only</label></span>
</label>
<select kendo-drop-down-list class="sdk-dropdown" ng-model="Address.CountryId" k-options="countries" k-on-change="onChange(kendoEvent)" />
<label>#Resource.Address</label>
<input class="block" type="text" name="Address" ng-model="Address.Address1" maxlength="100" />
<input class="block" type="text" ng-model="Address.Address2" maxlength="100" />
<input class="block" type="text" ng-model="Address.Address3" maxlength="100" />
<label id="lblState">{{StateLabel}}</label>
<select kendo-drop-down-list class="sdk-dropdown" ng-model="Address.StateProvinceId" k-options="states" k-rebind="states" />
<label>#Resource.City</label>
<input class="block" type="text" name="City" ng-model="Address.City" maxlength="50" />
<label>{{ZipCodeLabel}}</label>
<input class="block" type="text" name="ZipCode" ng-model="Address.ZipCode" maxlength="50" />
</div>
<div ng-show="readOnly">
<textarea style="min-height:120px!important" disabled>{{Address.Address}}{{Address.Address1}}
{{Address.Address2}}
{{Address.City}}
{{Address.State}}{{Address.CountryName}}
{{Address.ZipCode}}</textarea>
</div>
</div>
My Angular Controller:
var AddressController = function ($scope, $http, $routeParams, $location) {
$scope.StateLabel = "State";
$scope.ZipCodeLabel = "Zip Code";
$scope.countryDataSource = {
transport: {
read: {
dataType: "json",
url: "/ApplicationData/GetCountries",
}
}
};
$scope.countries = {
dataSource: $scope.countryDataSource,
dataTextField: "Name",
dataValueField: "Id",
optionLabel: "Select..."
};
this.showAlert = function () {
alert("this is test method");
};
$scope.onChange = function (e) {
var countryId = e.sender.value();
if (countryId == 2) {
$scope.StateLabel = "Province";
$scope.ZipCodeLabel = "Postal Code";
}
else {
$scope.StateLabel = "State";
$scope.ZipCodeLabel = "Zip Code";
}
$http.get('/ApplicationData/GetStates/' + countryId).
success(function (jsonData, status, headers, config) {
console.log(jsonData);
var data = {
dataSource: jsonData,
dataTextField: "Name",
dataValueField: "Id",
optionLabel: "Select..."
};
$scope.states = data;
}).
error(function (data, status, headers, config) {
console.log("error getting countries");
});
};
$scope.SameAsBilling = function (checked) {
alert(1);
if (SameAsBilling.checked = true) {
vmCustomer.BillingAddress = vmCustomer.ShippingAddress
}
};
};
AddressController.$inject = ['$scope', '$http', '$routeParams', '$location'];
i need you guys to help me with the below function
$scope.SameAsBilling = function (checked) {
alert(1);
if (SameAsBilling.checked = true) {
vmCustomer.BillingAddress = vmCustomer.ShippingAddress
}
};
i m tying but don't know why the check box is not talking to controller please help

Related

how can update my form in modal in angular js?

hello i am creating mean application in which i want to update record.the record is in table format and when user click on edit button then a modal appears with its database values on input text box . I have not any problem in updating field but i stuck in updating video part. How can I do it??
html form (i use single form for creating and updating)
<div class="panel panel-default">
<div class="panel-heading">Add Videos</div>
<div class="panel-body">
<div style="margin:10px;">
<form name="addVideos" class="" method="post">
<div class="alert alert-success" ng-show="success" style="background-color:black;">
<strong>successfully updated!!</strong> Redirecting to all videos page.
</div>
<div class="form-group">
<label>Title</label>
<input type="text" class="form-control" ng-model="form.title" required name="title" placeholder="Enter Title">
</div>
<div class="form-group">
<label>Description</label>
<textarea class="form-control" ng-model="form.description" required name="description" rows="5" id="comment" placeholder="Enter Description"></textarea>
</div>
<div class="form-group">
<label>Author</label>
<input type="text" class="form-control" required ng-model="form.author" name="author" id="exampleInputPassword1" placeholder="Enter Author Name">
</div>
<div class="form-group">
<label>duration</label>
<input type="text" class="form-control" required ng-model="form.duration" name="duration" id="exampleInputPassword1" placeholder="Enter Author Name">
</div>
<!-- <div class="form-group">
<label>ispublic</label>
<input type="text" class="form-control" required ng-model="form.public" name="public" id="exampleInputPassword1" placeholder="Enter Author Name">
</div> -->
<div class="form-group">
<label for="sel1">ispublic:</label>
<select class="form-control" ng-model="form.public" >
<option ng-selected="test==false" value="0">0</option>
<option ng-selected="test==true" value="1">1</option>
</select>
</div>
<div class="row">
<div class="col-md-2" style="margin-top: 19px;" >
<!-- <!ng-hide="display" !> -->
<input type="file" accept="video/*" file-model="myFile" required/>
</div>
<div class="col-md-8" style="margin-left:29px;">
<button ng-click="add == true ? uploadFile(form) : updateVideo()" class="btn btn-danger" ng-disabled="addVideos.$invalid" style="margin:10px;">Submit</button>
</div>
</div>
<progress value="{{progressBar}}" max="100" ng-show="view">
</progress>
<div class="progress" ng-show="view" style="width:40%;">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="{{progressBar}}" aria-valuemin="0" aria-valuemax="100" style="width:{{progressBar}}%">
{{progressBar}}% Complete (success)
</div>
</div>
</form>
</div>
</div>
</div>
my controller
function generateUUID() {
var d = new Date().getTime();
var uuid = 'xxxxxxx.mp4'.replace(/[xy]/g, function(c) {
var r = (d + Math.random() * 16) % 16 | 0;
d = Math.floor(d / 16);
return (c == 'x' ? r : (r & 0x3 | 0x8)).toString(16);
});
return uuid;
};
var localstorageApp = angular.module('BlurAdmin.pages.videos.allVideos');
localstorageApp.controller('TbleCtrl',['$rootScope','$scope', '$filter', 'editableOptions', 'editableThemes', '$window', '$http',
'$uibModal', 'baProgressModal','localStorageService','$state','$rootScope',
function ($rootScope,$scope, $filter, editableOptions, editableThemes, $window, $http, $uibModal,
baProgressModal,localStorageService,$state,$rootScope) {
var token = localStorageService.get('TOKEN')
if(token == null){
$window.location.href = '/index.html';
}
token = token.substring(1, token.length - 1);
$http.get("/api/loggedin/"+token).then(function(response) {
console.log("response"+JSON.stringify(response.data.error))
if(response.data.error == true){
localStorageService.remove('TOKEN')
$window.location.href = '/index.html';
}
});
$scope.users = [];
$scope.display=true;
// $scope.form = [];
//$scope.bool = null;
$scope.id = 0;
$scope.redirect = function () {
$window.location.href = "#/videos/addVideos";
}
$http.get("/api/all-videos").then(function(response) {
$scope.users = response.data.data;
console.log(response.data.data);
});
$scope.open = function(e,id,page, size, addOrEdit) {
$scope.updateVideo() = function(){
alert('working');
}
// $scope.bool = bool
$scope.id = id
$scope.display=true;
var modalInstance = $uibModal.open({
// animation: $ctrl.animationsEnabled,
// ariaLabelledBy: 'modal-title',
// ariaDescribedBy: 'modal-body',
templateUrl: page,
controller: 'ModalInstanceCtrl',
controllerAs: '$scope',
size: size,
// appendTo: parentElem,
resolve: {
users: function () {
return $scope.users;
},
id: function () {
return $scope.id;
}
}
});
modalInstance.result.then(function (selectedItem) {
// console.log("selectedItem"+JSON.stringify(selectedItem.data));
$scope.users = selectedItem;
// $scope.users.push(selectedItem.data)
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
};
$scope.removeVideo = function(id, $index) {
var m = parseInt(id);
if ($window.confirm("Are you sure you want to delete?") == true) {
$http.post("/api/delete-video/" + m).then(function(response) {
$scope.users.splice( $index, 1 );
});
// $window.location.reload()
} else {
}
}
$scope.openProgressDialog = baProgressModal.open;
// editableOptions.theme = 'bs3';
// editableThemes['bs3'].submitTpl = '<button type="submit" class="btn btn-primary btn-with-icon"><i class="ion-checkmark-round"></i></button>';
// editableThemes['bs3'].cancelTpl = '<button type="button" ng-click="$form.$cancel()" class="btn btn-default btn-with-icon"><i class="ion-close-round"></i></button>';
}
])
var qwe='';
angular.module('BlurAdmin.pages.users').directive('fileModel', ['$parse', function($parse) {
return {
restrict: 'A',
link: function(scope, element, attrs) {
var model = $parse(attrs.fileModel);
var modelSetter = model.assign;
element.bind('change', function() {
scope.$apply(function() {
modelSetter(scope, element[0].files[0]);
qwe= element[0].files[0];
console.log(element[0].files[0].name);
});
});
}
};
}]).service('hexafy', ['$http', '$window','$timeout', function($http, $window,$timeout) {
this.myFunc = function (x) {
return x.toString(16);
}
// GET ALL INFORMATION IN VIDEOS
this.getAll = function(t,x){
console.log(x);
$http.get("/api/get-video/"+x).then(function(response) {
console.log(response);
// console.log(response.data.data);
console.log(response.data.response.data);
t.form = response.data.response.data;
// $scope.form.public = response.data.response.data.ispublic;
t.test = response.data.response.data.ispublic;
// console.log($scope.form.level);
// $scope.form.level = $scope.levels[response.data.response.data.level - 1];
// console.log($scope.form.level);
});
}
this.display = function(p){
console.log(p);
console.log(qwe);
}
this.updateVideo = function(){
console.log(qwe);
alert('working');
}
}]).controller('ModalInstanceCtrl', ['$scope', '$uibModalInstance', '$http', 'id', '$timeout','hexafy' ,function ($scope, $uibModalInstance,$http,id,$timeout,hexafy) {
$scope.form = {};
$scope.test = '';
// $scope.b = bool;
console.log($scope.b);
$scope.display=true;
console.log(hexafy.myFunc(187));
hexafy.getAll($scope,id);
console.log("id value "+id)
var file = $scope.myFile;
console.log(file);
}])
How could i detect file in modal??

Angular contact form - undefined field after after sending

Here is my index.html
<div data-ng-controller="help">
<div id="messages" class="alert alert-success" data-ng-show="messages" data-ng-bind="messages"></div>
<div data-ng-show="progress.active()" style="color: red; font-size: 50px;">Sending…</div>
<form name="helpForm" novalidate role="form">
<div class="form-group">
<label for="name">Your Name </label>
<span class="label label-danger" data-ng-show="submitted && helpForm.name.$error.required">Required!</span>
<input type="text" name="name" data-ng-model="userName" class="form-control" required />
</div>
<div class="form-group">
<label for="email">Your E-mail address</label>
<span class="label label-danger" data-ng-show="submitted && helpForm.email.$error.required">Required!</span>
<span class="label label-danger" data-ng-show="submitted && helpForm.$error.email">Invalid email!</span>
<input type="email" name="email" data-ng-model="userEmail" class="form-control" required />
</div>
<div class="form-group">
<label for="message">Message</label>
<span class="label label-danger" data-ng-show="submitted && helpForm.message.$error.required">Required!</span>
<textarea name="message" data-ng-model="userMessage" class="form-control" required></textarea>
</div>
<button data-ng-disabled="progress.active()" data-ng-click="submit(helpForm)" class="btn btn-default">Submit</button>
</form>
And part of my app.js
angular.module('myApp', ['ajoslin.promise-tracker'])
.controller('help', function ($scope, $http, $log, promiseTracker, $timeout) {
$scope.subjectListOptions = {
'bug': 'Report a Bug',
'account': 'Account Problems',
'mobile': 'Mobile',
'user': 'Report a Malicious User',
'other': 'Other'
};
$scope.progress = promiseTracker();
$scope.submit = function(form) {
$scope.submitted = true;
if (form.$invalid) {
return;
}
var $promise = $http({
method: 'POST',
url:'api/contactUs',
params: {
'callback' : 'JSON_CALLBACK',
'userName' : $scope.userName,
'userEmail' : $scope.userEmail,
'userMessage' : $scope.userMessage
}
})
.success(function(data, status, headers) {
if (data.status == 'OK') {
$scope.userName = null;
$scope.userEmail = null;
$scope.userMessage = null;
$scope.messages = 'Your form has been sent!';
$scope.submitted = false;
} else {
$scope.messages = 'Oops, we received your request, but there was an error processing it.';
$log.error(data);
}
})
.error(function(data, status, headers) {
$scope.progress = data;
$scope.messages = 'There was a network error. Try again later.';
$log.error(data);
})
.finally(function() {
$timeout(function() {
$scope.messages = null;
}, 9000);
});
After sending the letter to mail, all fields (name, email, message) in the form are displayed as "Undefined"
I use an node.js server and connect via api (api/contactUs)
I can not understand what the problem is, already tried everything I could, but the error remains.
Please help with the solution of this problem.
Thank you in advance!
When you use POST method, you should pass data object instead of params object.
Change this:
params: {
'callback' : 'JSON_CALLBACK',
'userName' : $scope.userName,
'userEmail' : $scope.userEmail,
'userMessage' : $scope.userMessage
}
To this:
data: {
'callback' : 'JSON_CALLBACK',
'userName' : $scope.userName,
'userEmail' : $scope.userEmail,
'userMessage' : $scope.userMessage
}

AngularJs and Controller alias

I tried to alias the AngularJS controller in the view, but for some strange reason - it does not seem to respond when I prefix the methods and properties - any idea what might be causing it?
Here's my view (I'm using it with Laravel 5.1):
#extends('admin.template.layout-login')
#section('content')
<div class="row">
<div class="large-6 medium-8 columns large-offset-3 medium-offset-2" ng-controller="LoginController as login">
<form
name="htmlForm"
class="panel hide"
ng-submit="login.submit()"
ng-class="{ 'show-block' : !login.isRequestCompleted() }"
novalidate
>
<label for="username">
Username: *
<ng-messages
for="htmlForm.username.$error"
class="hide"
ng-class="{ 'show-inline' : login.isSubmitted() }"
>
<ng-message
when="required"
class="warning"
>Please provide your email address</ng-message>
<ng-message
when="email"
class="warning"
>Invalid email address</ng-message>
<ng-message
when="unsuccessful"
class="warning"
>Incorrect login details</ng-message>
<ng-message
when="suspended"
class="warning"
>Your account has been suspended</ng-message>
</ng-messages>
</label>
<input
type="email"
ng-model="formData.username"
name="username"
id="username"
required
>
<label for="password">
Password: *
<ng-messages
for="htmlForm.password.$error"
class="hide"
ng-class="{ 'show-inline' : login.isSubmitted() }"
>
<ng-message
when="required"
class="warning"
>Please provide your password</ng-message>
<ng-message
when="password"
class="warning"
>Invalid password</ng-message>
</ng-messages>
</label>
<input
type="password"
ng-model="formData.password"
name="password"
id="password"
required
password
>
<label for="remember">
<input
type="checkbox"
ng-model="formData.remember"
name="remember"
id="remember"
> Remember Me
</label>
<input
type="submit"
class="small button"
value="SEND ENQUIRY"
ng-if="!login.isOutForDelivery()"
>
<button
type="button"
class="small button"
disabled
ng-if="login.isOutForDelivery()"
>
PLEASE WAIT <i class="fa fa-spinner fa-spin"></i>
</button>
</form>
<div
class="hide"
ng-class="{ 'show-block' : login.isRequestCompleted() }"
ng-bind-html="login.trustAsHtml(confirmation)"
></div>
</div>
</div>
#endsection
and here's the AngularJS controller module:
(function(window, angular, app) {
"use strict";
app.controller(
'LoginController',
[
'$scope',
'$controller',
'$window',
function(
$scope,
$controller,
$window
) {
angular.extend(this, $controller('FormController', { $scope: $scope }));
$scope.submit = function() {
if ( ! $scope.isValid()) return false;
$scope.data = {
username : $scope.formData.username,
password : $scope.formData.password
};
$scope.submitRequest(
'/admin',
$scope.data
)
.success(function(data, status, headers, config, statusText) {
$window.location.href = data.url;
})
.error(function(data, status, headers, config, statusText) {
$scope.validation(data);
$scope.endOutForDelivery();
return false;
});
};
}
]
);
})(window, window.angular, window.CmdSystem.App);
Plus the FormController that the previous extends:
(function(window, angular, app) {
"use strict";
app.controller(
'FormController',
[
'$scope',
'RequestService',
'ContentService',
function(
$scope,
RequestService,
ContentService
) {
$scope.outForDelivery = false;
$scope.requestCompleted = false;
$scope.submitRequest = function(url, formData) {
$scope.outForDelivery = true;
return RequestService.post(url, formData);
};
$scope.responseReceived = function() {
$scope.requestCompleted = true;
$scope.outForDelivery = false;
};
$scope.isResponseReceived = function() {
return $scope.requestCompleted && ! $scope.outForDelivery;
};
$scope.endOutForDelivery = function() {
$scope.outForDelivery = false;
};
$scope.trustAsHtml = ContentService.trustAsHtml;
$scope.isValid = function() {
return $scope.htmlForm.$valid;
};
$scope.isSubmitted = function() {
return $scope.htmlForm.$submitted &&
! $scope.isRequestCompleted();
};
$scope.isRequestCompleted = function() {
return $scope.requestCompleted;
};
$scope.isOutForDelivery = function() {
return $scope.outForDelivery;
};
$scope.validation = function(data) {
angular.forEach(data, function(value, key) {
this[key].$error[value] = true;
}, $scope.htmlForm);
};
}
]
);
})(window, window.angular, window.CmdSystem.App);
None of the methods are on the controller. They're all defined on the $scope. So you can't access them using the login alias, which refers to the controller, not to the scope.
If you want to be able to call
login.foo()
from the view, then the method must be set on the controller, not on the scope:
this.foo = function() { ... };

TypeError: undefined is not a function (AngularJS)

I'm struggling with a webshop I'm making in AngularJS. I'm trying to save a product into a database, but something goes wrong when I try to call a certain function. I'm getting this error:
TypeError: undefined is not a function
at l.$scope.createProduct (http://localhost:3000/controllers/product.Controller.js:30:20)
at hb.functionCall (http://localhost:3000/node_modules/angular/angular.min.js:198:426)
at Cc.(anonymous function).compile.d.on.f (http://localhost:3000/node_modules/angular/angular.min.js:215:74)
at l.$get.l.$eval (http://localhost:3000/node_modules/angular/angular.min.js:126:193)
at l.$get.l.$apply (http://localhost:3000/node_modules/angular/angular.min.js:126:419)
at HTMLFormElement.<anonymous> (http://localhost:3000/node_modules/angular/angular.min.js:215:126)
at HTMLFormElement.c (http://localhost:3000/node_modules/angular/angular.min.js:32:363)
I don't understand why this is happening, so I hope someone out there can help me. Here's my HTML code
<form ng-submit="createProduct()">
<div class="form-group">
<label for="id">ID</label>
<input type="text" ng-model="id" class="form-control" id="id" name="id" placeholder="Indtast det tilhørende ID">
</div>
<div class="form-group">
<label for="brand">Brand</label>
<input type="text" ng-model="brand" class="form-control" id="brand" name="brand" placeholder="Indtast brand">
</div>
<div class="form-group">
<label for="content">Indhold</label>
<input type="text" ng-model="content" class="form-control" id="content" name="content" placeholder="Indtast indhold">
</div>
<div class="form-group">
<label for="alcohol">Procent</label>
<input type="text" ng-model="alcohol" class="form-control" id="alcohol" name="alcohol" placeholder="Indtast antal procent">
</div>
<div class="form-group">
<label for="price">Pris</label>
<input type="text" ng-model="price" class="form-control" id="price" name="price" placeholder="Indtast prisen">
</div>
<div class="form-group">
<label for="category">Kategori</label>
<input type="text" ng-model="category" class="form-control" id="category" name="category" placeholder="Indtast kategori">
</div>
<button type="submit" class="btn btn-primary">Opret produkt</button>
</form>
Besides my HTML i also have a product.Controller and a products.service. The productController looks like this:
(function(){
function productController($scope, productsService, cartService, $routeParams){
var modelProduct = function(productArray){
$scope.product = productArray[0];
}
productsService.getProduct($routeParams.id)
.then(modelProduct);
$scope.addToCart = function(product, amount){
cartService.addToCart(product, amount);
}
$scope.createProduct = function() {
var product = {
id : this.id,
brand : this.brand,
content : this.content,
alcohol : this.alcohol,
price : this.price,
category : this.category
}
console.log(product);
productsService.saveProduct(product);
}
}
angular
.module("Main.product", [])
.controller("productController", productController);
})();
and my productsService looks like this:
(function(){
"use strict";
var productsService = function($http){
var categoriesSelected = new Array();
var products = new Array();
var getProducts = function(){
/* Hent fra den lokale grillbar
return $http.get("./data/products.json")
.then(function(response){
console.log(response.data);
return response.data;
}, getError);
/* Hent fra databasen */
return $http.get("api/products")
.then(function(response){
console.log(response.data);
return response.data;
}, getError);
};
var setProducts = function(data) {
products = data;
}
var getProduct = function(id) {
return $http.get("api/product/" + id)
.then(function(response) {
return response.data;
})
}
var saveProduct = function(product){
console.log(product);
return $http.post("api/product", product)
.then(function(response){
return response.data;
})
}
var getCategories = function(response){
return $http.get("./data/categories.json")
.then(function(response){
return response.data;
}, getError)
};
var getCategoriesSelected = function(){
return categoriesSelected;
}
var productFilter = function(product){
if(categoriesSelected.length > 0){
if(categoriesSelected.indexOf(product.category) < 0){
return;
}
}
return product;
}
var getError = function(reason){
console.log(reason);
}
var findProductInArray = function(data, prodId){
return data.filter(function(elem){
if(elem.prodId === prodId){
return elem;
}
});
}
var categoryChange = function(category){
var i = categoriesSelected.indexOf(category);
if (i > -1) {
categoriesSelected.splice(i, 1);
}
else {
categoriesSelected.push(category);
}
}
var categoryFilter = function(product) {
console.log("aks");
if($scope.categoriesSelected.length > 0) {
if($scope.categoriesSelected.indexOf(product.category) < 0) {
return;
}
}
return product;
}
return{
getProducts: getProducts,
getProduct: getProduct,
getCategories: getCategories,
getCategoriesSelected: getCategoriesSelected,
productFilter: productFilter,
categoryChange: categoryChange,
categoryFilter: categoryFilter
}
}
angular
.module("Main.products")
.factory('productsService', productsService);
})();
I hope someone out there can help me!
You don't appear to be exporting saveProduct as a public method of your service:
return{
getProducts: getProducts,
getProduct: getProduct,
getCategories: getCategories,
getCategoriesSelected: getCategoriesSelected,
productFilter: productFilter,
categoryChange: categoryChange,
categoryFilter: categoryFilter
}

Input fields values is not passing to controller

I have been stuck on this for a while. I have a Job class that has multiple ChangeOrders and Purchase Orders. I can create a New Job without problems. I use the same code to Post the New CO and PO. The problem is the values are not binding to there controllers. The difference between the New Job and CO/PO is I am using $rootScope and ngStorage to insert the JobId into the CO/PO modals.
Purchase Order Modal
//New PurchaseOrder Modal
$scope.NewPurchaseOrderModal = function () {
var modalInstance = $modal.open({
templateUrl: 'views/modals/NewPurchaseOrderModal.html',
controller: 'NewPurchaseOrderModalInstanceCtrl',
windowClass: 'large-Modal',
resolve: {
p: function () {
return $scope.p;
}
}
});
};
Purchase Order POST
//Post New Purchase Orders
$scope.submitPO = function () {;
$scope.job = {};
alert($scope.PONumber);
var data = {
JobId: $scope.job.JobId,
PONumber: $scope.PONumber,
PODate: $scope.PODate,
POAmount: $scope.POAmount,
POLastPrintDate: $scope.POLastPrintDate,
POEmail: $scope.POEmail,
POPrint: $scope.POPrint,
POFaxNumber: $scope.POFaxNumber,
PONotes: $scope.PONotes,
POCreatedBy: $scope.POCreatedBy,
PODeliveryDate: $scope.PODeliveryDate,
POShipVia: $scope.POShipVia,
POShowPrices: $scope.POShowPrices,
POCostCode: $scope.POCostCode,
POApprovedNumber: $scope.POApprovedNumber,
POBackorder: $scope.POBackorder,
}
$http.post('/api/apiPurchaseOrder/PostNewPurchaseOrder', data).success(function (data, status, headers) {
console.log(data);
$scope.cancelNewPurchaseOrderModal();
});
};
});
Purchase Order View
<div class="container" style="margin-top:20px" ng-controller="POCtrl">
<form ng-submit="submitPO()" enctype="multipart/form-data">
<fieldset>
<tabset>
<tab heading="Cover">
<div class="col-xs-12" style="margin-top:10px">
<div class="inline-fields" style="" ng-show="true">
<label>JobId:</label>
<input style="width:150px;" ng-model="job.JobId" type="text" />
</div>
<div class="inline-fields">
<label></label>
<input style="width:150px;margin-left:81px" ng-model="job.JobName" type="text" />
<label style="margin-left:268px">Number:</label>
<input style="width:150px" ng-model="PONumber" type="text" />
</div>
<div class="inline-fields">
<label style="margin-left:48px">Attn:</label>
<input style="width:150px;" ng-model="ChangeOrderAttn" type="text" />
<label style="margin-left:291px">Date:</label>
<input style="width:150px" ng-model="PODate" type="date" />
</div>
<div class="inline-fields">
<label style="margin-left:39px">Email:</label>
<input style="width: 150px;" ng-model="POEmail" type="text" />
<label style="margin-left:217px">GC Ref Number:</label>
<input style="width:150px" ng-model="POApprovedNumber" type="text" />
</div>
<div class="inline-fields">
<label style="margin-left:52px">Fax:</label>
<input style="width: 150px; " ng-model="POFaxNumber" type="text" />
<label style="margin-left:233px">Delivery Date:</label>
<input style="width:150px" ng-model="PODeliveryDate" type="date" />
</div>
<div class="inline-fields">
<label style="margin-left: 438px">Approved Amount:</label>
<input style="width:150px" ng-model="ChangeOrderApprovedAmount" type="text" />
</div>
</div><!--End col-xs-6-->
<div class="col-xs-12">
<div class="inline-fields" style="margin-top:30px;margin-left:2px">
<label>Created By:</label>
<input style="width:635px" ng-model="POCreatedBy" type="text" />
</div>
<div class="inline-fields" style="margin-left:37px">
<label>Notes:</label>
<textarea style="width:635px;height:200px" ng-model="PONotes"></textarea>
</div>
<div class="inline-fields" style="margin-top:10px;margin-left:509px">
<label>Amount:</label>
<input style="width:150px" ng-model="POAmount" type="text" />
</div>
</div>
<div class="col-xs-12" style="margin-top:30px;padding-bottom:20px">
<input style="margin-left:435px;width:75px;margin-right:25px" ng-click="printEditChangeOrderModal()" type="button" value="Print" go-click="#" />
<input style="margin-right:25px;width:75px" type="submit" value="Save" go-click="#" />
<input style="width:75px" type="button" ng-click="cancelNewPurchaseOrderModal();" value="Exit" go-click="#" />
</div><!--End col-xs-12-->
</tab><!--End Cover Content-->
<tab heading="Details">...</tab>
<tab heading="Items">...</tab>
</tabset><!--End Tab Content-->
</fieldset><!--End Fieldset-->
</form>
Function to set the JobId in sessionStorage
//Sync Table Selections / sessionStorage
$scope.selectedJob = $sessionStorage.$default($scope.jobArray[1]);
$scope.selectJob = function (job) {
$rootScope.job = job;
angular.extend($scope.selectedJob, job);
console.log($rootScope.job);
};
$scope.clearSelectedJob = function () {
$sessionStorage.$reset();
};
table to select which Job is set in Storage
<div id="scrollArea" style="margin-top:40px" ng-controller="JobCtrl">
<table class=" table table-striped table-hover">
<thead> <tr><th>No</th><th>Name</th></tr></thead>
<tbody>
<tr ng-repeat="job in jobArray" class="pointer no_selection" ng-class="{highlight: job.JobNumber===selectedJob.JobNumber}">
<td ng-dblclick="EditJobModal(job.JobId)" ng-click="selectJob(job)">{{job.JobNumber}}</td>
<td ng-dblclick="EditJobModal(job.JobId)" ng-click="selectJob(job)">{{job.JobName}}</td>
</tr>
</tbody>
</table>
</div><!--End Job Table-->
PO Controller
'use strict';
app.controller('POCtrl', function ($scope, $rootScope, $resource, $http, $filter,
$q, $modal, PO, POGet, POFactory, notificationFactory) {
//New PurchaseOrder Modal
$scope.NewPurchaseOrderModal = function () {
var modalInstance = $modal.open({
templateUrl: 'views/modals/NewPurchaseOrderModal.html',
controller: 'NewPurchaseOrderModalInstanceCtrl',
windowClass: 'large-Modal',
resolve: {
p: function () {
return $scope.p;
}
}
});
};
//Edit PurchaseOrder Modal
$scope.EditPurchaseOrderModal = function (id) {
$.get('/api/apiPurchaseOrder/' + id, function (data) {
$scope.items = data;
var modalInstance = $modal.open({
templateUrl: 'views/modals/EditPurchaseOrderModal.html',
controller: 'EditPurchaseOrderModalInstanceCtrl',
windowClass: 'large-Modal',
resolve: {
items: function () {
return $scope.items;
}
}
});
});
};
//GET PurchaseOrders
POGet.query().then(function (data) {
$scope.poArray = data;
}, function (reason) {
errorMngrSvc.handleError(reason);
});
//Post New Purchase Orders
$scope.submitPO = function () {;
$http.post('/api/apiPurchaseOrder/PostNewPurchaseOrder', $scope.data).success(function (data, status, headers) {
$scope.cancelNewPurchaseOrderModal();
});
};
//$scope.submitPO = function () {;
// $scope.job = {};
// alert($scope.PONumber);
// var data = {
// JobId: $scope.job.JobId,
// PONumber: $scope.PONumber,
// PODate: $scope.PODate,
// POAmount: $scope.POAmount,
// POLastPrintDate: $scope.POLastPrintDate,
// POEmail: $scope.POEmail,
// POPrint: $scope.POPrint,
// POFaxNumber: $scope.POFaxNumber,
// PONotes: $scope.PONotes,
// POCreatedBy: $scope.POCreatedBy,
// PODeliveryDate: $scope.PODeliveryDate,
// POShipVia: $scope.POShipVia,
// POShowPrices: $scope.POShowPrices,
// POCostCode: $scope.POCostCode,
// POApprovedNumber: $scope.POApprovedNumber,
// POBackorder: $scope.POBackorder,
// }
// $http.post('/api/apiPurchaseOrder/PostNewPurchaseOrder', data).success(function (data, status, headers) {
// console.log(data);
// $scope.cancelNewPurchaseOrderModal();
// });
//};
});//End POCtrl
app.controller('NewPurchaseOrderModalInstanceCtrl', function ($scope, $modalInstance) {
$scope.cancelNewPurchaseOrderModal = function () {
$modalInstance.dismiss('cancel');
};
});
app.controller('EditPurchaseOrderModalInstanceCtrl', function ($scope, $modalInstance, items) {
$scope.items = items;
$scope.cancelEditPurchaseOrderModal = function () {
$modalInstance.dismiss('cancel');
};
});
Job Controller
'use strict';
app.controller('JobCtrl', function ($scope, $rootScope, $resource, $route, $http, $filter,
$q, $modal, $sessionStorage, Job, JobGet, jobFactory, notificationFactory) {
//New Job Modal
$scope.NewJobModal = function () {
var modalInstance = $modal.open({
templateUrl: 'views/modals/NewJobModal.html',
controller: 'NewJobModalInstanceCtrl',
windowClass: 'large-Modal',
resolve: {
p: function () {
return $scope.p;
}
}
});
};
$scope.EditJobModal = function (id) {
$.get('/api/apiJob/' + id, function (data) {
$scope.items = data;
var modalInstance = $modal.open({
templateUrl: 'views/modals/EditJobModal.html',
controller: 'EditJobModalInstanceCtrl',
windowClass: 'large-Modal',
resolve: {
items: function () {
return $scope.items;
}
}
});
});
};
//GET Jobs
$scope.jobArray = {};
JobGet.query().then(function (data) {
$scope.jobArray = data;
}, function (reason) {
errorMngrSvc.handleError(reason);
});
//Post New Job
$scope.submitJob = function () {
var data = {
GeoAreaId: $scope.newItems.GeoAreaId,
JobTypeId: $scope.newItems.JobTypeId,
JobClassId: $scope.newItems.JobClassId,
CustomerId: $scope.newItems.CustomerId,
JobId: $scope.newItems.JobId,
JobNumber: $scope.newItems.JobNumber,
JobName: $scope.newItems.JobName,
JobDescription: $scope.newItems.JobDescription,
JobOriginalContract: $scope.newItems.JobOriginalContract,
JobBillingDate: $scope.newItems.JobBillingDate,
JobTotalCO: $scope.newItems.JobTotalCO,
JobRevisedContract: $scope.newItems.JobRevisedContract,
}
$http.post('/api/apiJob/PostNewJob', data).success(function (data, status, headers) {
console.log(data);
$scope.cancelNewJobModal();
$scope.$evalAsync(function () {
$scope.data;
});
});
};
//Update Job
$scope.updateJob = function (job) {
jobFactory.updateJob(job).success(successCallback)
.error(errorCallback);
console.log(job);
$scope.cancelEditJobModal();
$scope.$evalAsync(function () {
$scope.job;
});
};
var successCallback = function (job, status, headers, config) {
notificationFactory.success();
};
var errorCallback = function (job, status, headers, config) {
notificationFactory.error(job.ExceptionMessage);
};
//Sync Table Selections / sessionStorage
$scope.selectedJob = $sessionStorage.$default($scope.jobArray[1]);
$scope.selectJob = function (job) {
$rootScope.job = job;
angular.extend($scope.selectedJob, job);
console.log($rootScope.job);
};
$scope.clearSelectedJob = function () {
$sessionStorage.$reset();
};
$scope.newItems = {};
//Typeahead New Job Customer select
$scope.selectNewCustomer = function (customer) {
$scope.newItems.CustomerId = customer.CustomerId;
$scope.newItems.Customer.CustomerName = customer.CustomerName;
$scope.newItems.Customer.CustomerAddress = customer.CustomerAddress;
$scope.newItems.Customer.CustomerCity = customer.CustomerCity;
$scope.newItems.Customer.CustomerState = customer.CustomerState;
$scope.newItems.Customer.CustomerZipcode = customer.CustomerZipcode;
$scope.newItems.Customer.CustomerPhoneNumber = customer.CustomerPhoneNumber;
$scope.newItems.Customer.CustomerFaxNumber = customer.CustomerFaxNumber;
$scope.newItems.Customer.CustomerWebsite = customer.CustomerWebsite;
$scope.newItems.Customer.CustomerOtherShit = customer.CustomerOtherShit;
$scope.newItems.Customer.CustomerHidden = customer.CustomerHidden;
$scope.newItems.Customer.CustomerPM = customer.CustomerPM;
$scope.newItems.Customer.CustomerAdmin = customer.CustomerAdmin;
$scope.newItems.Customer.CustomerAccountant = customer.CustomerAccountant;
};
});//End Job Controller
app.controller('NewJobModalInstanceCtrl', function ($scope, $modalInstance) {
$scope.cancelNewJobModal = function () {
$modalInstance.dismiss('cancel');
};
});
app.controller('EditJobModalInstanceCtrl', function ($scope, $modalInstance, items) {
$scope.items = items;
$scope.cancelEditJobModal = function () {
$modalInstance.dismiss('cancel');
};
});
I'd change to be handled everything in a single model which is easier to:
$scope.submitPO = function () {
$scope.data.jobId = $rootscope.job.id; //make sense?
$http.post('/api/apiPurchaseOrder/PostNewPurchaseOrder', $scope.data).success(function (data, status, headers) {
$scope.cancelNewPurchaseOrderModal();
});
};
the view:
<div class="inline-fields" style="" ng-show="true">
<label>JobId:</label>
<input style="width:150px;" ng-model="data.job.JobId" type="text" />
</div>
.....
<div class="inline-fields">
<label style="margin-left:48px">Attn:</label>
<input style="width:150px;" ng-model="data.ChangeOrderAttn" type="text" />
<label style="margin-left:291px">Date:</label>
<input style="width:150px" ng-model="data.PODate" type="date" />
</div>
and remove this $scope.job = {}; from your submit function, it looks like you are 'reseting' the job to an empty object

Resources