AngularJS 中如何设置下拉框的默认值?

在 AngularJS 中,我们可以使用 ng-options 指令来生成下拉框。但是,如果我们需要设置默认选项,该怎么办呢?接下来,让我们分步骤介绍。

步骤一:为 ng-model 绑定一个初始值

下拉框中默认选中的选项通常要与某个变量或表达式相关联,因此我们需要为 ng-model 指令绑定一个合适的初始值。例如:

------- ------------------------
  ------- ---------------------- ----------
  ------- ---------------------- ----------
  ------- ---------------------- ----------
---------

在这个例子中,我们将 ng-model 指令设置为 selectedItem 变量,该变量的初始值可以是任何我们想要的值。

步骤二:使用 ng-selected 选择默认选项

接下来,我们可以使用 ng-selected 指令来选择默认选项。例如:

------- ------------------------
  ------- --------------- ------------------------- --- ----------------- ----------
  ------- --------------- ------------------------- --- ----------------- ----------
  ------- --------------- ------------------------- --- ----------------- ----------
---------

在这个例子中,我们使用 ng-selected 指令来判断每个选项是否应该被选择。如果 selectedItem 与当前选项的值相同,则该选项将被选择。

示例代码

下面是一个完整的示例,演示如何在 AngularJS 中设置默认选项:

--------- -----
----- -------
------
  ------- ------------------------------------------------------------------------------------
-------
------
  ---- -----------------------------
    ------- ------------------------
      ------- --------------- ------------------------- --- ----------------- ----------
      ------- --------------- ------------------------- --- ----------------- ----------
      ------- --------------- ------------------------- --- ----------------- ----------
    ---------
    ------ ---- --------- --------------------
  ------

  --------
    -------- -------------------- -
      ------------------- - ----------
    -
  ---------
-------
-------

在这个示例中,我们将 ng-model 指令绑定到 $scope.selectedItem 变量,并将其初始值设置为 'option2'。同时,我们使用 ng-selected 指令来选择默认选项。

希望这篇文章能够帮助你更好地理解 AngularJS 中如何设置下拉框的默认选项。

来源:JavaScript中文网 ,转载请注明来源 本文地址:https://www.javascriptcn.com/post/25270