【Angular】——双向绑定ngModel实现联动
来源:互联网 发布:淘宝哪家mlb帽子是正品 编辑:程序博客网 时间:2024/05/17 20:42
最近在做前台遇到一个问题,下拉框通过与后台交互查询到数据(多条数据),而后有一个输入框,输入框的数据来源于下拉框,随着下拉框数据而进行改变。如果每次都要与后台交互则浪费资源。
实现过程:
第一步:课程名称与后台数据使用{[ngModel]}双向绑定
<div class="form-group"> <label class="col-sm-3 control-label">课程名称:</label> <div class="col-sm-9"> <select class="form-control" [(ngModel)]="courseInfo.courseId" name="courseId"(change)="onchange($event.target.value)" > <option *ngFor="let option of courseNameOptions" [value]="option.id" >{{option.courseName}}</option> </select> </div> </div>
$event.target.value:获取下面option的value值。
第二步:component中编辑onchange事件
Coursecode: any;//声明 onchange(courseid: any) { // console.log(courseid) // console.log(this.courseNameOptions.find(x=>x.id==courseid)); let coursenameOption = this.courseNameOptions.find(i => i.id == courseid);//找到courseid与多条数据中id相等的该条数据 this.Coursecode = coursenameOption.courseCode;//赋值课程代码 }
第三步:input也与后台数据进行双向绑定。
<div class="form-group"> <label class="col-sm-3 control-label">课程代码:</label> <div class="col-sm-9"> <input class="Course" type="text" class="form-control" name="Course" [(ngModel)]="Coursecode" placeholder="请输入专业名称" > </div> </div>
通过以上之后即可实现课程名称和课程代码框中的数据来源于同一条后台返回的数据。
阅读全文
0 0
- 【Angular】——双向绑定ngModel实现联动
- angular学习总结二——数据&事件绑定(ngIf、ngFor、ngSwitch、ngModel)
- Angular <select> 和<radio> ngModel 绑定
- ngModel双向绑定的一些问题
- ngModel 双向绑定(初学者易错点)
- Angular双向数据绑定简易实现
- angular 双向绑定的实现原理
- 使用angular实现双向数据绑定
- angular中自定义组件实现双向绑定
- angular 双向绑定原理
- angular-数据双向绑定
- Angular双向数据绑定
- Angular双向数据绑定
- Angular双向数据绑定
- div实现自适应高度的textarea,实现angular双向绑定
- 原生JS实现angular的双向数据绑定
- Angular双向数据绑定原理
- 【AngularJs】Angular双向数据绑定
- JetBrains中文乱码解决办法
- linux C获取ini配置文件
- 问题归纳
- Eclipse设置自定义代码块的方法
- UIView中间透明周围半透明(四种方法)
- 【Angular】——双向绑定ngModel实现联动
- 前端涉及的宽高(简单汇总)
- 非root用户安装python第三方模块
- 学生管理系统总结(五)
- 【java EE】JPQL
- 【VB】使用ASCII码限制输入内
- 二分+dfs——51nod1307 绳子与重物
- 查找文件内容 find
- Servlet生命周期