I have a JSON list that I am storing in an AngularJS variable called score
$scope.jobTemplate = [{ type: "AddInstructions", visible: false, buttonText: "Add Instructions", editableInstructionsList: [{ Number: totalEditableInstruction, Text: "Instruction 1"}] },
{ type: "AddSingleQuestionsList", visible: false, buttonText: "Add Ques. (single Ans.)", singleQuestionsList: [{ Number: totalSingleQuestionList, Question: "What is your gender ?", Options: "Male1;Female2"}] },
{ type: "AddMultipleQuestionsList", visible: false, buttonText: "Add Ques. (Multiple Ans.)", multipleQuestionsList: [{ Number: totalMultipleQuestionList, Question: "What is your multiple gender ?", Options: "Malem1;Femalem2"}] },
{ type: "AddTextBoxQuestionsList", visible: false, buttonText: "Add Ques. (TextBox Ans.)", textBoxQuestionsList: [{ Number: totalTextBoxQuestionList, Question: "Who won 2014 FIFA World cup ?", Options: "text"}] },
{ type: "AddListBoxQuestionsList", visible: false, buttonText: "Add Ques. (ListBox Ans.)", listBoxQuestionsList: [{ Number: totalListBoxQuestionList, Question: "What is your multiple gender ?", Options: "Malem1;Femalem2"}] }
];
I am adding data on button click like this:
// single questions..
$scope.InsertSingleQuestionRow = function () {
totalSingleQuestionList = totalSingleQuestionList + 1;
var singleQuestionsList = { Number: totalSingleQuestionList, Question: $('#SingleQuestionTextBoxQuestionData').val(), Options: $('#SingleQuestionTextBoxAnswerData').val() };
$scope.jobTemplate[1].singleQuestionsList.push(singleQuestionsList);
refreshSingleQuestionsList();
}
The newly added item appears correctly in the UI, but when I try to send the current scope variable data via HTTP post to the server, it does not contain the latest data.
$scope.ClientCreateTemplateFunction = function () {
var clientCreateTemplateData = $scope.jobTemplate;
var url = ServerContextPah + '/Client/CreateTemplate';
if (true) {
//startBlockUI('wait..', 3);
$http({
url: url,
method: "POST",
data: clientCreateTemplateData,
headers: { 'Content-Type': 'application/json' }
}).success(function (data, status, headers, config) {
//$scope.persons = data; // assign $scope.persons here as promise is resolved here
//stopBlockUI();
}).error(function (data, status, headers, config) {
});
}
else {
$scope.showErrors = true;
showToastMessage("Error", "Some Fields are Invalid !!!");
}
}
I also tried using a global variable. I'm not sure why the scope variable works fine with the UI but does not work when sending the same data to the server via HTTP post. Please help.
I've included a snapshot where the UI shows two lists, while the console.log of the same scope variable only shows one list.