When updating, I want to insert new values coming from the ui instead of old values present in the local collection. The below code inserts old values in local collection(I don't want this to happen).
dataService.getSupplierById($routeParams.id)
.then(function (supplier) {
$scope.supplier = supplier; //now this contains local collection
$scope.save = function () {
$scope.updatedSupplier = $scope.supplier; //I want the scope to be updated and take values from the ui
dataService.updateSupplier($routeParams.id, $scope.updatedSupplier)
.then(function () {
//success
},
function () {
//error
});
};
},
function () {
//error
});
This is my Html.
<div>
<label for="City">City</label>
<input name="City" type="text" data-ng-model="updateSupplier.city" value="{{supplier.city}}" />
</div>
How can I do this? How can I update the scope to take new values? I'm new to angular.
If you are binding to updateSupplier as the ng-model then you shouldn't overwrite the values when you save:
$scope.save = function () {
// remove the line that overwrites, was here
dataService.updateSupplier($routeParams.id, $scope.updatedSupplier)
.then(function () {
//success
},
function () {
//error
});
};
}
Angular will take care of two-way binding the value inside the ng-model so by the time you save it will have the correct value that was input in the textbox.
You can also clean up the code by not have 2 different scope properties:
dataService.getSupplierById($routeParams.id)
.then(function (supplier) {
$scope.supplier = supplier; //now this contains local collection
$scope.save = function () {
dataService.updateSupplier($routeParams.id, $scope.supplier )
.then(function () {
//success
},
function () {
//error
});
};
},
function () {
//error
});
And then in the html:
<div>
<label for="City">City</label>
<input name="City" type="text" data-ng-model="supplier.city" />
</div>
The initial value should bind into the value attribute automatically.
Related
I know there is a very similar question asked over here but my object hierarchy is different than the one in that question.
Anyways, I want to store the HTML form input data in to my JavaScript object. Here is my HTML form code:
<form id="newAuction">
<input id="title" name="title" required type="text" value="" />
<input id="edate" name="edate" required type="datetime" value="" />
<input id="minbid" name="minbid" required type="number" value="" />
<button class="btn btn-primary">Submit</button>
</form>
What I want is to get the values of these 3 inputs and store it in my JS object.
I know the proper JSON format needed to post the data to my API. (I tried POSTing with POSTman and I get a status 200, so it works). The proper format is:
{
"auction": {
"Title": "Auction1",
"EDate": "01/01/1990",
"MinBid": 30
},
"productIds": [1,2,3]
}
This is what my JS object looks like:
<script>
$(document).ready(function() {
var vm = {
auction: {},
productIds: []
};
//validation and posting to api
var validator = $("#newAuction").validate({
//assigning values
vm.auction.Title = document.getElementById('title').value;
vm.auction.MinBid = document.getElementById('minbid').value;
vm.auction.EDate = document.getElementById('edate').value;
vm.productIds.push(1);
submitHandler: function () {
$.ajax({
url: "/api/newAuction",
method: "post",
data: vm
})
.done(function () {
toastr.success("Auction Added to the db");
//setting the vm to a new vm to get rid of the old values
var vm = { auction: {}, productIds: [] };
validator.resetForm();
})
.fail(function () {
toastr.error("something wrong");
});
return false;
}
});
});
</script>
As you can see, I am using document.getElementById('title').value; to get the values and assign them but I'm getting the syntax error Expected : Comma expected
Not sure if this matters, but this is inside a .NET MVC5 project.
Move your value assignment set of codes inside submitHandler. Check the syntax of validate() https://jqueryvalidation.org/validate/
//validation and posting to api
var validator = $("#newAuction").validate({
submitHandler: function () {
//assigning values
vm.auction.Title = document.getElementById('title').value;
vm.auction.MinBid = document.getElementById('minbid').value;
vm.auction.EDate = document.getElementById('edate').value;
vm.productIds.push(1);
$.ajax({
url: "/api/newAuction",
method: "post",
data: vm
})
.done(function () {
toastr.success("Auction Added to the db");
//setting the vm to a new vm to get rid of the old values
var vm = { auction: {}, productIds: [] };
validator.resetForm();
})
.fail(function () {
toastr.error("something wrong");
});
return false;
}
});
I don't get any error message, but while debugging Scope values are not binding it shows Undefined...
Controller:
$scope.companyModify = function () {
var param = {
companyId:$scope.companyId,
companyName:$scope.companyName,
billPrintLinesTop:$scope.billPrintLinesTop,
billPrintLinesBottom:$scope.billPrintLinesBottom,
isPrintHeader:$scope.isprintHeader,
billTypeId:$scope.billTypeId,
billColumnId :$scope.billColumnId,
noOfCopies: $scope.noOfCopies,
billHeaderAlignmentId: $scope.billHeaderAlignmentId,
billTitle: $scope.billTitle,
billSortOrderId:$scope.billSortOrderId,
posDefaultQty:$scope.posDefaultQty,
posTaxTypeId:$scope.posTaxTypeId,
isAllowNegativeStock:$scope.isAllowNegativeStock,
serviceTaxCalcTypeId : $scope.serviceTaxCalcTypeId,
wishMessage:$scope.wishMessage,
coinageBy:$scope.coinageBy,
isAutoGenerateProductCode:$scope.isAutoGenerateProductCode
};
console.log(param);
Calling the companyModify Function :
Open braces of companyModify closes in SocketService...
SocketService.post(apiManage.apiList['CompanyModify'].api,param).
then(function (resp) {
var data = resp.data.response;
if (data.status === true) {
angular.forEach($scope.companyList, function (value) {
if (value.companyId == $scope.companyId) {
value.$edit = false;
}
});
Notify.alert(data.message, {
status: 'success',
pos: 'top-right',
timeout: 5000
});
$scope.load();
}
else {
Notify.alert(data.message, {
status: 'danger',
pos: 'top-right',
timeout: 5000
});
}
});
};
Ensure $scope is properly injected in controller
someModule.controller('MyController', ['$scope', function($scope) {
...
$scope.aMethod = function() {
...
}
...
}]);
In your html code, input values are binded to company.XXX :
<input type="text" class="form-control input-sm" ng-model="company.posTaxTypeId" placeholder="Enter POSTaxCalculation" >
If you want your code to work is the controller, you must use the same binding and use posTaxTypeId: $scope.company.posTaxTypeId instead of posTaxTypeId: $scope.posTaxTypeId
or change your html code to :
<span data-ng-show="!company.isEdit" data-ng-bind="posTaxTypeId"></span>
<span data-ng-show="company.isEdit">
<input type="text" class="form-control input-sm" ng-model="posTaxTypeId" placeholder="Enter POSTaxCalculation" >
</span>
also ensure that binding are declared properly, without spaces :
bad
data-ng-bind="company.posTaxTypeId "
ng-model="company.posTaxTypeId "
good
data-ng-bind="company.posTaxTypeId"
ng-model="company.posTaxTypeId"
All I want to do is to display the value of a ngModel, a variable defined in my controller. But the value didn't change to the correct value until I click somewhere else on the page or click the update button again. Although it does change to the correct value in the console.
My themeLayout.html file
<div class="theme-body" ng-controller="ThemeController as theme">
<select ng-model="theme.selectedTheme" ng-change="theme.getThemeDetails(theme.selectedTheme)">
<option ng-repeat="option in theme.themePacks">{{option.title}}</option>
</select>
<div class="form-group">
<label for="appLogo">App Logo</label>
<div>
<img ng-src="{{theme.currentThemeImageUrl}}" alt="Description" />
</div>
<input type="text" class="form-control" id="appLogo" ng-model="theme.currentThemeImageUrl">
</div>
</div>
And this is my theme controller
export default class ThemeController {
constructor($log, ApiService, $scope, $state, $window) {
'ngInject';
this.s3 = new this.AWS.S3();
this.selectedTheme = '';
this.currentThemeId = '';
this.currentS3ThemeOption = {};
this.currentS3ThemeOptionToUpload = {};
this.currentThemeImageUrl = '';
}
getThemeDetails(theme) {
this.$log.log(`get theme details function been called`, theme);
const obj = this;
for(let item of this.themePacks) {
if (theme === item.title) {
this.currentThemeId = item.themeId;
}
}
this.s3.getObject({
Bucket: `improd-image-pipeline`,
Key: `remoteUX/qa/${obj.currentThemeId}.json`,
}, (err, data) => {
if (err) {
obj.$log.log(err);
} else {
obj.currentS3ThemeOption = JSON.parse(data.Body);
obj.currentS3ThemeOptionToUpload = obj.currentS3ThemeOption;
for (const prop in obj.currentS3ThemeOption.colors) {
obj[prop] = obj.getColors(obj.currentS3ThemeOption.colors[prop]);
}
obj.currentThemeImageUrl = obj.currentS3ThemeOption.layout.titleImageUrl;
obj.$log.log(`We should have upadted theme opion now`, obj.currentS3ThemeOption, obj.currentThemeImageUrl);
}
});
this.$log.log(obj.currentS3ThemeOption, this.currentS3ThemeOption);
}
}
This is when I click the fox option in the selection, it read the data and stroe it into the currentSeThemeOption.
As you can see from the console, it also print of the value
What I am thingking is that might the 'this' and obj is causing the problem.
After I did add $scope.apply() function as he suggested, but it didn't solve the problem.
Update your model inside a scope.$apply() call:
getThemeDetails(theme) {
this.$log.log(`get theme details function been called`, theme);
const obj = this;
for(let item of this.themePacks) {
if (theme === item.title) {
this.currentThemeId = item.themeId;
}
}
this.s3.getObject({
Bucket: `improd-image-pipeline`,
Key: `remoteUX/qa/${obj.currentThemeId}.json`,
}, (err, data) =>
scope.$apply(() => {
if (err) {
obj.$log.log(err);
} else {
obj.currentS3ThemeOption = JSON.parse(data.Body);
obj.currentS3ThemeOptionToUpload = obj.currentS3ThemeOption;
for (const prop in obj.currentS3ThemeOption.colors) {
obj[prop] = obj.getColors(obj.currentS3ThemeOption.colors[prop]);
}
obj.currentThemeImageUrl = obj.currentS3ThemeOption.layout.titleImageUrl;
obj.$log.log(`We should have upadted theme opion now`, obj.currentS3ThemeOption, obj.currentThemeImageUrl);
}
})
);
this.$log.log(obj.currentS3ThemeOption, this.currentS3ThemeOption);
}
Once you have assigned a $scope object into the ng-model object. then you just put
$scope.$apply();
so that it will bind properly with UI elements.
It's the problem of digest cycle the digest cycle in triggered in only in four conditions
event (i.e your click),
http request,
change in input,
Timers with callbacks ($timeout etc.),
I am using MEAN JS, i am trying to edit the list items on the list page, but it shows the error as below. i have initiated the data using ng-init="find()" for the list and ng-init="findOne()" for individual data.
Error: [$resource:badcfg] Error in resource configuration for action `get`. Expected response to contain an object but got an array
HTML
Below i the form inside the controller where it initiates the find() and findOne().
<div ng-controller="OrdersController" ng-init="find()">
<div>
<div class="order-filter">
<div ng-repeat="order in orders">
<form ng-init="findOne()" name="orderForm" class="form-horizontal" ng-submit="update(orderForm.$valid)" novalidate>
<input type="text" class="" ng-model="order.title">
<input type="text" class="" ng-model="order.content">
<div class="form-group">
<input type="submit" value="Update" class="btn btn-default">
</div>
</form>
</div>
</div>
</div>
</div>
Controller
$scope.update = function (isValid) {
$scope.error = null;
if (!isValid) {
$scope.$broadcast('show-errors-check-validity', 'orderForm');
return false;
}
var order = $scope.order;
order.$update(function () {
$location.path('orders/' + order._id);
}, function (errorResponse) {
$scope.error = errorResponse.data.message;
});
};
$scope.find = function () {
Orders.query(function loadedOrders(orders) {
orders.forEach(appendFood);
$scope.orders = orders;
});
};
$scope.findOne = function () {
$scope.order = Orders.get({
orderId: $stateParams.orderId
});
};
You need to check your Orders Service which probably is using $resource to provide your API requests (Orders.query)
It should look something like this:
function OrdersService($resource) {
return $resource('api/orders/:orderId', {
orderId: '#_id'
}, {
update: {
method: 'PUT'
}
});
}
The style may be different depending on which version of mean you're using. By default, the $resource query will expect an array of results, but if for some reason you've set "isArray" to false then it will expect an object.
https://docs.angularjs.org/api/ngResource/service/$resource
I am using meteor-postgres and want to display results from SQL query.
Html:
...
<template name="myForm">
<form class="search" method="GET">
<input required="Required" type="text" name="width" placeholder="cm"/>
<input type="submit"/>
</form>
Results:
<ul>
<!--How do I render results here-->
</ul>
...
JS
Services = new SQL.Collection('services');
// in client
Template.myForm.events({
"submit form": function (event) {
var width = event.target.width.value;
// TypeError: table is undefined,
// Maybe because I am on client side?
console.log(services.first().fetch());
// How can I get data here and render it to html?
}
});
I dont know what else should I say but StackOverflows want me to add more text!
I decided to use https://github.com/numtel/meteor-pg because it has nice examples.
Update
It is better and simpler to use PgSubscription.change:
Template:
<template name="hello">
<label>id</label>
<input type="number" id="myid" />
{{#each services}}
{{id}}
{{/each}}
</template>
JS
myServices = new PgSubscription('services');
if (Meteor.isClient) {
Template.hello.helpers({
services: function () {
return myServices.reactive();
}
});
function handleInput(event, template) {
var idVal = template.find("#myid").value;
console.log("client change detected, new value:");
console.log(idVal);
myServices.change(idVal);
}
Template.hello.events({
"keyup #myid": function(event,template) {
handleInput(event,template);
},
"change #myid": function(event,template) {
handleInput(event,template);
}
});
}
if (Meteor.isServer) {
var PG_CONNECTION_STRING = "postgres://root:root#localhost:5433/parcelService";
var liveDb = new LivePg(PG_CONNECTION_STRING, "myApp");
var closeAndExit = function () {
liveDb.cleanup(process.exit);
};
// Close connections on hot code push
process.on('SIGTERM', closeAndExit);
// Close connections on exit (ctrl + c)
process.on('SIGINT', closeAndExit);
Meteor.publish('services', function (id) {
console.log("server services, id:");
console.log(id);
return liveDb.select(
'SELECT * FROM services WHERE id = $1', [ id ]
);
});
}
Old Method:
On client side I defined ReactiveVar for template
Template.myForm.created = function () {
this.asyncServices = new ReactiveVar(["Waiting for response from server..."]);
}
and helper for data
Template.myForm.helpers({
myData: function () {
return Template.instance().asyncServices.get();
}
});
now trigggering action with
Template.myForm.events({
'keyup input': function (evt, template) {
var asyncServicesX = Template.instance().asyncServices;
Meteor.call('services', params, function(error, response){
if (error) throw error;
asyncServicesX.set(response);
});
}
And finally method on server side, where sql is executed:
Meteor.methods({
'services': function (params) {
Future = Npm.require('fibers/future');
var future = new Future();
// Obtain a client from the pool
pg.connect(PG_CONNECTION_STRING, function (error, client, done) {
if (error) throw error;
// Perform query
client.query(
'select * from services where col1=$1 and col2=$2',
params,
function (error, result) {
// Release client back into pool
done();
if (error) throw error;
future["return"](result.rows);
}
)
});
return future.wait();
}
});