Question

所以我使用angularjs / SQL技术从数据库中检索数据，如下所示：

$http.get("retrieveData.php").then(function(response){
    $scope.tasks = response.data.tasks;
})

然后我有一个允许我使用表单将新数据插入数据库的函数：

$scope.submitTask = function(){
    var description = document.getElementById("typeDescription").value;
    var todayDate = document.getElementById("todayDate").value;

    try{
        reminder = document.getElementById("reminder").value;
    }
    catch(err){
        reminder = "NONE";
    }

    var status = document.getElementsByName("selectStatus");
    var statusValue;

    for(i=0;i<status.length;i++){
        if(status[i].checked){
            statusValue = status[i].value;
        }
    }

    var xhttp = new XMLHttpRequest();

      xhttp.onreadystatechange = function() {
           if (this.readyState == 4 && this.status == 200) {
                document.getElementById("msg").innerHTML = this.responseText;
            }
      };
      xhttp.open("POST", "enterTask.php");
      xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        xhttp.send("desc="+description+"&status="+statusValue+"&reminder="+reminder+"&todayDate="+todayDate);
}

我确定我的第一个问题是我使用的是JavaScript的AJAX而不是Angular的？但我不知道如何转换它。

即便如此，我也不知道如何更新$scope.tasks。

我已经在线查看了如何使用Angular进行发布，而且还没有找到很多东西。只是关于如何获得的教程。

请不要给任何JQuery。我正在使用纯JavaScript，谢谢。

感谢您的帮助，我对我的代码进行了一些重构（仍在混合JavaScript，但我计划研究Angular表单）。这就是我现在所拥有的。

$http.get("retrieveData.php").then(function(response){
        $scope.tasks = response.data.tasks;
    })

    $scope.submitTask = function(){
        var description = document.getElementById("typeDescription").value;
        var todayDate = document.getElementById("todayDate").value;

        try{
            reminder = document.getElementById("reminder").value;
        }
        catch(err){
            reminder = "NONE";
        }

        var status = document.getElementsByName("selectStatus");
        var statusValue;

        for(i=0;i<status.length;i++){
            if(status[i].checked){
                statusValue = status[i].value;
            }
        }

        var task = {
            desc:description,
            status:statusValue,
            reminder:reminder,
            todayDate: todayDate
        }
        $http.post('enterTask.php', task).then(
            function(response){
                $scope.tasks.push(task);
            }
        );
    }

});

出于某种原因，我添加到元素后仍然没有更新我的$scope.tasks。如果我向空数据库添加一个元素，我的控制台会出现角度错误。

TypeError：无法读取属性＆＃39; push＆＃39;未定义的

的sooo。不知道为什么会这样。

当我在推送后警告$scope.tasks时，它会在推送后提醒1比实际包含的更少（一旦数据库中有一个或多个元素产生上述错误）。

这是我的HTML，也许它与它有关？

<ul>
    <li ng-repeat="x in tasks" ng-bind="x.Description"></li>
</ul>
<form>
        <input type="text" value="{{today}}" id="todayDate">
        <textarea rows="15" cols="100" name="typeDescription" id="typeDescription"></textarea>
        <input type="checkbox" ng-model="setReminder" name="setReminder">Set Reminder
        <input type="date" name="reminder" id="reminder" ng-if="setReminder"><br>
        <input type="radio" name="selectStatus" value="CR">Client Response
        <input type="radio" name="selectStatus" value="IR">Internal Response
        <input type="radio" name="selectStatus" value="BD">BD Control
        <input type="radio" name="selectStatus" value="OC">On Calendar<br>
        <input type="submit" ng-click="submitTask();">
    </form>

也是我的php ...

<?php

/*$description = json_decode($_POST['desc']);
$reminder = json_decode($_POST['reminder']);
$todayDate = json_decode($_POST['todayDate']);
$status = json_decode($POST['status']);*/

$data = json_decode(file_get_contents("php://input"));

$description = $data->desc;
$reminder = $data->reminder;
$todayDate = $data->todayDate;
$status = $data->status;

require 'databaseConnect.php';

      $query="INSERT INTO TaskTracker (DATESTAMP,STATUS,DESCRIPTION,REMINDER) VALUES ('$todayDate','$status','$description','$reminder')";

      mysql_query($query) or die(mysql_error());

?>

注释掉的部分没有工作，所以我使用了file_get_contents位。

Answer 1

在角度js中，发布数据非常简单，只需2到3行代码即可完成。

//first lets collect your data in an Object

var data = {
  desc: description,
  status: statusValue,
  reminder: reminder,
  todayDate: todayDate
}

//then send collected data using $http service

$http.post('enterTask.php',data).then(function(response){
    $scope.tasks.push(data);//After successful HTTP request you push the data  to your $scope.task array 
})

Answer 2

你必须“解决”一些观点才能使submitTask函数成为一种有棱有角的思维方式。

使用ng-model数据绑定从输入元素到$scope。那里有几个教程。通过使用它，你可以摆脱整个getElementById的东西。
使用$http.post通过网络发送数据。
只需添加/删除元素即可更新$scope.tasks数组。角度的双向数据绑定将在例如对你进行更新。通过ng-repeat

对于最后一点，我为您绘制了JavaScript代码。

    $scope.submitTask = function(){
    var description = document.getElementById("typeDescription").value;
    var todayDate = document.getElementById("todayDate").value;

    try{
        reminder = document.getElementById("reminder").value;
    }
    catch(err){
        reminder = "NONE";
    }

    var status = document.getElementsByName("selectStatus");
    var statusValue;

    for(i=0;i<status.length;i++){
        if(status[i].checked){
            statusValue = status[i].value;
        }
    }

      var task = {
          desc: description,
          status: statusValue,
          reminder: reminder,
          todayDate: todayDate
      }
      $http.post('enterTask.php', task).then(
         function (response) {
           $scope.tasks.push(task);
         }
      );
}

将新数据添加到SQL数据库后如何更新$ scope

2 个答案: