角度范围变量未更新

Question

我对 Angular 还很陌生，但似乎这应该可行：

HTML：

<div style="float:left;width:26%;height:96%;margin:2% 0 2% 0;background-color:#efefef;padding:0 2% 0 2%;" ng-app="fcApp"
     ng-controller="fcCtrl">
<span>Find:</span>
<input id="student_search" type=text
       ng-keypress="selectFirstStudent($event)"
       ng-model="student_search" placeholder="name / ssn">
<div style="max-height:90%;" ng-show="student_search">
    <div style="width:100%;height:30px;"
        ng-repeat="student in students | filter:student_search as filtered"
        ng-click="newStudent(student);">
        {{ student.firstname }} {{ student.lastname }} - {{ student.ssn }}
    </div>
</div>

<div style="float:left;width:70%;">
    <input id="ssn" ng-model="student.ssn">
    {{ student.ssn }}
</div>

控制器（部分）：

$scope.getStudents = function(){
    $http.get('/getstudents/')
        .then(function(response){
            $scope.students = response.data.students;
            $scope.student = $scope.students[0];
        }
    );
};
$scope.getStudents();

所以getStudents 函数显然在某种程度上可以从数据库中获取学生列表。但是我的所有$scope 变量都没有更新。

当我在输入框中键入姓名的一部分时，学生列表会被适当地过滤掉，并且列表会变短。但是，我在列表中看不到任何值，只有应该出现在姓氏和 SSN 之间的“-”。它出现在过滤结果的每一行。

没有提供所有代码，但是当我单击过滤列表中的一项时，我会收到一条显示所选学生 ID 和 SSN 的警报。所以数据就在那里，只是没有出现在 Angular 变量中。另外，最后一个 div 应该显示学生 SSN 两次，对吗？那里也没有。顺便说一句，单击过滤后的列表会触发将$scope.student 设置为单击的学生对象的事件，正如我的警报所示。

那么为什么我在过滤后的列表或设置了ng-model 的输入中看不到任何值？

Answer 1

你正在使用

$scope.student = $scope.students[0];

在你的方法里面。

还有

ng-repeat="student in students | filter:student_search as filtered"

两者都是相同的变量，因此您的 DOM 不会更新。

尝试使用以下不同的名称，例如我使用的是stud

<div style="max-height:90%;" ng-show="student_search">
    <div style="width:100%;height:30px;"
        ng-repeat="stud in students | filter:student_search as filtered"
        ng-click="newStudent(stud);">
        {{ stud.firstname }} {{ stud.lastname }} - {{ stud.ssn }}
    </div>
</div>