当前位置: 首页 > 面试题库 >

如何使用Angular JS设置下拉列表控件的选定选项

艾修筠
2023-03-14
问题内容

我正在使用Angular JS,我需要使用angular JS设置下拉列表控件的选定选项。如果这很荒谬,请原谅我,但我是Angular JS的新手

这是我的html的下拉列表控件

 <select ng-required="item.id==8 && item.quantity > 0" name="posterVariants"
   ng-show="item.id==8" ng-model="item.selectedVariant" 
   ng-change="calculateServicesSubTotal(item)"
   ng-options="v.name for v in variants | filter:{type:2}">
  </select>

填充后,我得到

 <select ng-options="v.name for v in variants | filter:{type:2}" ng-change="calculateServicesSubTotal(item)"
ng-model="item.selectedVariant" ng-show="item.id==8" name="posterVariants"
ng-required="item.id==8 &amp;&amp; item.quantity &gt; 0" class="ng-pristine ng-valid ng-valid-required">
    <option value="?" selected="selected"></option>
    <option value="0">set of 6 traits</option>
    <option value="1">5 complete sets</option>
</select>

如何设置value="0"要选择的控件?


问题答案:

希望我能理解您的问题,但是该ng- model指令在控件中的选定项目和的值之间创建了双向绑定item.selectedVariant。这意味着更改item.selectedVariantJavaScript或更改控件中的值会更新另一个。如果item.selectedVariant值为0,则应选择该项目。

如果variants是对象数组,则item.selectedVariant必须将其设置为这些对象之一。我不知道您的范围内包含哪些信息,但以下是一个示例:

JS:

$scope.options = [{ name: "a", id: 1 }, { name: "b", id: 2 }];
$scope.selectedOption = $scope.options[1];

HTML:

<select data-ng-options="o.name for o in options" data-ng-model="selectedOption"></select>

这将使“ b”项被选中。



 类似资料:
  • 我有一个目标如下。我必须将其显示为下拉列表: 在我的控制器中,我有一个携带值的变量。该值决定了在下拉列表中默认选择阵列中上述三项中的哪一项: 当我创建下拉表单项时,如下所示: 我面临两个问题: > 而不是 默认情况下,即使我有

  • 我有一个从数据库中提取下拉选项的工厂: 然后,我将该数据应用于控制器中的下拉列表/选择: 下面是select标记的外观: 放入$scope的下拉列表数据。临床DDL如下所示: 从 DB 返回的用户数据如下所示: 在我的控制器中,我填充了下拉列表/选择,然后我获取了一个用户ID并将其提交给DB以获取用户信息。这些用户信息会返回。然后,我想根据DB返回的“DefaultLocationId”从先前填充

  • 问题内容: 我一直在努力寻找例子,但根本找不到任何东西。我唯一知道的是我可以使用http模块来获取数据。这是我当前正在执行的操作,但它是使用Knockout编码的。有人可以给我一些有关如何使用AngularJS重新编码此功能的建议吗? 的HTML Java脚本 问题答案: 正确的方法是使用指令。HTML看起来像这样。 JavaScript: 您还需要确保Angular在html上运行并且模块已加载

  • 问题内容: 我有一个带有已知值的下拉列表。我想做的是使用 jQuery 将下拉列表设置为一个我知道存在的特定值。使用常规 JavaScript,我将执行以下操作: 但是,我需要使用 jQuery 来完成此操作,因为我为选择器使用了 CSS类愚蠢的[ASP.NET客户端ID …)。 这是我尝试过的一些方法: 如何使用 jQuery ? 更新资料 事实证明,我第一次做对了: 当我在上面放置一个警报时,

  • 问题内容: 我需要使用cypress测试angularjs应用程序的下拉列表。 我需要单击一个下拉列表,然后从下拉列表中选择或单击一个项目。我尝试如下所示,它只能在一个实例上使用,而不能在其他情况下使用,因为第二个get()方法中的ID号随着其动态生成而不断变化。这不是带有html中选项的标准选择。 1)无论如何,我可以在每个选项上设置一个唯一属性并仅选择所需的属性,还是可以仅基于列表项的描述进行

  • 本文向大家介绍angularjs实现下拉列表的选中事件示例,包括了angularjs实现下拉列表的选中事件示例的使用技巧和注意事项,需要的朋友参考一下 select标签的对于大家来说很熟悉了,下面我来讲讲AngularJS中 对select的属性设置,做出选择某个下拉选项后控制其他标签的隐藏; 其中在select中设ng-model = “state”双向绑定数据,他的值会随你选择下拉项而改变,就