javascript - Angular js将数据插入列表不起作用

Question

我有一个 Json 列表，我将其保存在 Angular JS Score var 中

 $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"}] }
];

我通过单击按钮推送数据，如下所示

 // 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();
}

虽然在 UI 中新添加的项目显示正确，但当我尝试通过 http post 将当前范围的可变数据发送到服务器时，它没有最新数据。

$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 !!!");
    }

}

我也尝试过创建全局变量。我不知道为什么作用域变量在 UI 上运行良好，但在通过 http post 将相同数据发送到服务器时却不起作用。帮助我。

我附加了一个快照，其中在 UI 中显示两个列表，而当我 console.log 相同的作用域变量时，它仅显示一个列表。

Answer 1

$scope.ClientCreateTemplateFunction = function() {
  var clientCreateTemplateData = $scope.jobTemplate;
  var url = ServerContextPah + '/Client/CreateTemplate';
  if (true) {
    //startBlockUI('wait..', 3);
    $http.post(url, $scope.jobTemplate).then(onSuccess, onError);

    function onSuccess(data, status, headers, config) {
      //$scope.persons = data; // assign  $scope.persons here as promise is resolved here
      //stopBlockUI();
    };   

    function onError(data, status, headers, config) {};

  } else {
    $scope.showErrors = true;
    showToastMessage("Error", "Some Fields are Invalid !!!");
  }

}