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数据库调用填充的。从DB中检索结果时，下拉列表中显示的值将设置为学生中的第一个值。

如何将禁用值设为显示的值，直到用户实际点击下拉菜单并选择一个？

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。并完成了。

HTML填充ng-options时选择默认选项覆盖

1 个答案: