将数据推入列表的角度js不起作用

时间:2014-07-17 10:11:58

标签: javascript angularjs

我有一个Json列表,我保存在角度js得分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中时,同一个范围变量只显示一个列表。

enter image description here

2 个答案:

答案 0 :(得分:2)

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

}

答案 1 :(得分:1)

你无法在post方法中发送javascript自定义对象使用jquery的param将对象转换为字符串或转换为JSON

 $http({
            url: url,
            method: "POST",
            data: $.param( clientCreateTemplateData, true );
            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) {

        });