Question

所以，我的SPA功能大约有98％。该应用程序从MySQL数据库中提取数据，并允许用户编辑/删除记录。对于相关页面，它将编辑/删除指定学生ID的数据，但不会在文本字段中正确显示数据。

如果您没有输入值，它将显示JSON数组中的第一项，但不会显示您在搜索字段中指定的项。

我没有很好地解释这个问题，但是这里是一个HTML页面，它使用一个函数将数据传递给控制器，控制器然后按ID选择相应的学生并将其分配给变量$ scope.student。然后，我尝试使用student.first_name（或任何属性）在HTML页面上显示学生数据，但它无法正常工作。

<h3>Edit/Delete Student with ID: {{student.student_id}}</h3>

<div class="form-group">
<label for="sid">Student ID:</label>
<input type="text" class="form-control" id="sid" ng-model="sid">
</div>

<p><button type="button" class="btn btn-primary" ng-click="getRecord(sid)"> 
Get Student Info </button> </p>

<div class='row'>

<div class="col-md-6">

    <div class="form-group">
        <label for="first_name">First Name:</label>
        <input type="text" class="form-control" id="first_name" ng-model="student.first_name">
    </div>
    <div class="form-group">
        <label for="last_name">Last Name:</label>
        <input type="text" class="form-control" id="last_name" ng-model="student.last_name">
    </div>
    <div class="form-group">
        <label for="hrs_completed">Hrs Completed:</label>
        <input type="text" class="form-control" id="hrs_completed" ng-model= "student.hrs_completed">
    </div>
    <div class="form-group">
        <label for="hrs_attempted">Hrs Attempted:</label>
        <input type="text" class="form-control" id="hrs_attempted" ng-model= "student.hrs_attempted">
    </div>

</div>

<div class="col-md-6">

    <div class="form-group">
        <label for="gpa_points">GPA Points:</label>
        <input type="text" class="form-control" id="gpa_points" ng-model= "student.gpa_points">
    </div>
    <div class="form-group">
        <label for="major">Major:</label>
        <input type="text" class="form-control" id="major" ng-model="student.major">
    </div>
    <div class="form-group">
        <label for="advisor_id">Advisor ID:</label>
        <input type="text" class="form-control" id="advisor_id" ng-model="student.advisor_id">
    </div>
    <div class="form-group">
        <label for="email">Email:</label>
        <input type="text" class="form-control" id="email" ng-model="student.email">
    </div>

</div>

<button type="button" class="btn btn-primary" ng-click="updateRecord()">Update</button> &nbsp;
<button type="button" class="btn btn-primary" ng-click="deleteRecord()">Delete</button>

这是我的Javascript页面上的控制器：

app.controller('editCtrl', function($scope, $http) {

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

$scope.getRecord = function(sid) {
    id = sid;

    $scope.student = $scope.students.find(s=>s.id == sid);

};

我是否需要向服务器发出单独的GET请求才能使其正常工作或者我是否只需要以不同方式引用学生对象？

Answer 1

我认为您所获得的内容与response.data以及您尝试.find()以及您对html具有约束力的内容存在不匹配。

Check this plunkr

您正试图通过搜索id属性进行渲染。

$scope.students.find(s=>s.id == sid);

使用student_id属性在UI上进行渲染时。

{{student.student_id}}

因此，您所获得的内容肯定与response.data以及使用$scope.student属性呈现的内容不匹配。我想我的plunkr会证明你的功能是正确的。

如果此答案无效，请分享您的response.data。

分配给实例变量后，JSON响应中的数据不会显示

1 个答案: