填充ng-options時將覆蓋HTML Select默認選項

Question

<select ng-model="grade.students" ng-options="st as st.name for st in students">
          <option disabled selected value > -- Select a Student --</option>
</select>

我的代碼中有一個選擇下拉列表。 這些選項是從RESTful數據庫調用填充的。 從數據庫中檢索到結果后，下拉列表中顯示的值將設置為學生的第一個值。

在用戶實際單擊下拉列表並選擇一個值之前，如何使禁用值成為顯示的值？

Answer 1

嘗試這個：

var student1 = {
    id: 1,
    name: 'cool guy'
}
var student2 = {
    id: 2,
    name: 'nerd'
}
var students = [student1, student2];

所以我假設您有一個返回學生的函數，然后將學生分配給范圍...？

在分配學生到范圍之前，將默認選項推到學生數組上

$scope.selectedStudent = 0;
students.push({ id: 0, name: 'select one' });
$scope.students = students;

然后您將設置一個函數，以在選擇學生時調用

$scope.someFunction = function (student) {
    // do something with the selected student
}

現在在您的html中，您將具有以下內容：

<select ng-model="selectedStudent" ng-options="st.id as st.name for st in students" ng-change="someFunction(st)"></select>

如果稍后您決定讓預選學生將$ scope.selectedStudent設置為該學生的ID。 並做了。