关于Angular中使用HTML的select和option标签的一些问题

最新推荐文章于 2021-12-06 22:18:58 发布
最新推荐文章于 2021-12-06 22:18:58 发布
阅读量285 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/sagaminosakura/p/9819118.html
本文讨论了在Angular框架下使用HTML的select和option标签时遇到的问题，即通过[ngModel]和(ngModelChange)绑定数据时，无法自动设置option的selected属性，这在使用jQuery获取元素属性时会造成不便，特别是在组件单元测试中。

如果在Angular中使用HTML的select和option标签时，给两个标签分别绑定数据的时候，虽然可以通过[ngModel]和(ngModelChange)的形式绑定数值及选项变化后触发的事件。但是并不会像传统的那样给select下的option标签对应的值设定selected属性。这样就会造成再通过jQuery获取元素相关属性和值的时候取不到。尤其是在组建单元测试的时候，只能通过把组件的属性设定为public的，再在测试文件里直接访问组件属性的方式进行值的判定。

转载于:https://www.cnblogs.com/sagaminosakura/p/9819118.html

Angular.JS中select下拉框设置value的方法
10-19
总结来说，设置AngularJS中`select`下拉框的`value`，关键在于正确地使用`ngModel`和`ngRepeat`指令，将数据源中的属性映射到`option`的`value`属性上。同时，通过`ngModel`双向绑定，可以轻松地获取用户在下拉框中...
Angular2中select用法之设置默认值与事件详解
01-19
本文主要给大家介绍了Angular2中select用法之设置默认值与事件的相关内容，分享出来供大家参考学习，下面来看看详细的介绍： 一、设置默认值： 现在有三个学生小明，小红，小黑，对双向绑定的student设置你想要的...
angular js Select标签中的ng-options用法
12-09 3399
Select标签绑定option一直很麻烦,有了angular js的 ng-options只需定义好json对象轻松绑定option, ng-options 指令用于使用 填充 元素的选项。 ng-options 指令使用数组来填充下拉列表，多数情况下与 ng-repeat 指令一起使用。 json变量定义: $scope.goods_level = [{
angular中的select使用
weixin_39407291的博客
06-24 2149
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script> </head> <body> ...
Angularjs中ng-select和ng-options的用法详解
js_admin的博客
05-10 2688
最近由于项目需要，学了一段时间的angularjs，发现还是比较容易上手的，里面有很多地方，的确震撼了自己。这里就简单的介绍一下angularjs中ng-select和ng-options的用法。 一、ng-select ng-select用来将数据同HTML的标签进行绑定。这个指令可以和ng-model以及ng-options指令一起使用，构建精细且表现良好的动态表单。 ng-opti
8、angular的select
weixin_30493401的博客
10-09 206
1、数据源为数组 xforxinnames第一个x代表在下拉框内显示的数据第二个x指的是在names里数据 <!DOCTYPEhtml><html><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-sca...
angular2中，select、option，设置默认选中与获得选中项id
web
03-31 4422
在angular里，引入下拉框：(我用的ng-zorro组件库) <nz-select [(ngModel)]="selectedValue" nzPlaceHolder="Choose" style="width:300px;"> <nz-option id="nzoption" *ngFor="let option of selectedValueL...
Angular 中 select指令用法详解
09-01
在Angular框架中，`select`指令是一个非常重要的组件，它用于创建HTML的下拉选择列表...在遇到问题时，查阅相关文档和示例是解决问题的有效途径，希望以上的讲解能帮助开发者更好地理解和使用Angular中的`select`指令。
angular select中ng-options使用
菜鸡奋斗ing的博客
01-13 8704
function selectCtrl($scope) { $scope.selected = ''; $scope.model = [{ id: 10001, mainCategory: '男', productName: '水洗T恤', productColor: '白' }, { id: 10
三种下拉搜索框-html、select2、angularJs
qq_26430717的博客
12-06 4036
一、概述 需要做一个简单的下拉搜索，简单收集整理了下几种下拉搜索实现。分别为只用html,使用select2，使用angular。没有优化界面，只用基本功能。 简单整合，资源为相对路径直接可以直接用。 链接：https://pan.baidu.com/s/1XlmJPTzfnWvPmwbBTuXt-w 提取码：4b50 二、使用HTML 使用html的DataList 代码： <html> <head> <ti...
angular 的select 事件
蚁族的奋斗的博客
09-25 5158
1. 如果用click，会触发两次（一次是点击select的时候，另外一次是选择option的时候),会有问题 2. ngModelChange 事件，初始化的时候也会触发，有问题（针对我的需求） 3. change 事件，只有在值发生变化之后才会触发这个时间。...
angular 设置select默认option选择值
黄彪博客
09-07 7920
报修类型 请选择 {{item.name}}   1、select 标签中 ng-model 是绑定的option选择的值 2、第一个option是自己添加的，默认选中显示的值
AngularJS select中ngOptions用法详解
qian_xiaona的博客
03-10 2338
Angularjs  ng-options用法请参见如下链接 http://each.sinaapp.com/angular/tutorial/ng-options.html
angular里面select关于option的默认显示问题
weixin_34927844的博客
01-11 1909
今天遇到一个关于修改select里面修改option默认显示的问题，百度了好久一直没找到比较方便的答案，被一些答案误导了好久，后面终于找到了解决方法，就两句话的事情。。。。下面直接上代码 先在select里面定义一个ngmodel，然后再去ts文件中定义这个变量 变量后面直接加要默认显示的value值就可以了，默认显示就修改成功了，不过记得option里面记得加[value]="ite...
Angular4_Select选择改变事件
热门推荐
Martin 的博客
12-13 1万+
Angular4_Select选择改变事件 、 个人感觉change没用。 所以用的ngModelChange select class="form-control customSelect" [(ngModel)]="packagingType" name="packagingType" (ngModelChange)="packagTypeChange()"> o
Angular-select：轻松实现Angular1.x的响应式选择组件
在HTML文件中使用Angular-Select组件时，通常需要定义一个select元素，并通过Angular的指令来绑定数据源和选项。具体的HTML代码示例没有在描述中给出，但通常会包含数据绑定的ng-options或ng-repeat指令，以及与...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值