角度選擇具有空值 通常，我在Angular中實現select（下拉列表）時遇到了這個問題。在這裡，我試圖瞭解為什麼Angular在選擇列表的開頭新增一個空值。

讓我們開始你有這樣的程式碼。

< select  class = “form-control”  ng-model = “selectedName_noinit”  ng-options = “employee.id as employee.name for employee in employees” > </ select >

$scope.employees 被定義為.js檔案中具有屬性id 和的陣列 name。

這可能會產生類似於：

< select  class = “form-control”  ng-model = “selectedName_noinit”  ng-options = “employee.id as employee.name for employee in employees” >
            < option  value = “？”  selected = “selected” > </ option >
            < option  value = “0” > Name1 </ option >
            < option  value = “1” > Name2 </ option >
            < option  value = “2” > Name3 </ option >
</ select >

 

問題出現了：為什麼我們得到一個帶有值的選項而裡面沒有文字？

這是因為您的模型 selectedName沒有使用有效值初始化，或者在這種情況下，根本沒有初始化。為了不選擇預設的實際值，Angular會生成一個空選項並預設選擇它

如何解決這個問題 有兩種方法可以解決這些常見問題

例如：

< select  class = “form-control”  ng-model = “selectedName”  ng-options = “employee.id as employee.name for employee in employees”  ng-init = “” > </ select >
 

在此程式碼中，我們指定了初始值 selectedName。在 ng-init 我們將值0指定為下拉列表的選定值。

< select  class = “form-control”  ng-model = “selectedName”  ng-options = “employee.id as employee.name for employee in employees”  ng-init = “” >
            < option  value = “0”  selected = “selected” > Name1 </ option >
            < option  value = “1” > Name2 </ option >
            < option  value = “2” > Name3 </ option >
</ select >

或者，我們可以使用以下JavaScript行：

$ scope。selectedName = 0 ;

我們可以selectedName 在控制器中定義初始值 ，因此它將生成：

< select  class = “form-control”  ng-model = “selectedName”  ng-options = “employee.id as employee.name for employee in employees” >
            < option  value = “0”  selected = “selected” > Name1 </ option >
            < option  value = “1” > Name2 </ option >
            < option  value = “2” > Name3 </ option >
</select>

請注意， ng-init 允許功能。所以你可以呼叫一個函式， initSelect()它可以等待另一個值進行初始化 selectedName。