Angular5中提取公共组件之radio list的实例代码

本文给大家说一下Radio List的公共组件提取。

Radio List组件提取起来很方便，不想Checkbox那么复杂。

radio-list.component.ts

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { RadioItem } from '../../model/radio';
import { NgModel } from '@angular/forms';
@Component({
  selector: 'app-radio-list',
  templateUrl: './radio-list.component.html',
  styleUrls: ['./radio-list.component.css']
})
export class RadioListComponent implements OnInit {
  @Input() list: RadioItem[];
  @Input() name: string;
  @Input() colNum: number = 6;
  @Input("selectModel") model: string;
  @Output("selectChange") onChange: EventEmitter<any> = new EventEmitter<any>();
  constructor() { }
  ngOnInit() {
  }
  changeSelected() {
    let data = { value: this.model, name: this.name };
    this.onChange.emit(data);
  }
}

radio-list.component.html

<div *ngIf="list" class="form-row">
  <div class="col-{{colNum}} mb-2" *ngFor="let item of list">
    <div class="form-check abc-radio abc-radio-primary">
      <input class="form-check-input" type="radio" [value]="item.id" [(ngModel)]="model" (change)="changeSelected()" name="{{name}}" id="{{name}}_{{item.id}}">
      <label class="form-check-label" for="{{name}}_{{item.id}}">
        {{item.name}}
      </label>
    </div>
  </div>
</div>

在相关引用的module中注册

import { RadioListComponent } from '../components/radio-list/radio-list.component';
export const routes = [
  { path: '', component: xxxComponent, pathMatch: 'full' }
];
@NgModule({
  imports: [...],
  declarations: [...
    , RadioListComponent
    , ...],
  providers: []
})
export class xxxModule {
  static routes = routes;
}

对应的html中引用如下：

 <app-radio-list [list]="sourceArr"
         [name]="'selectedSource'"
         [colNum]="12"
        [(selectModel)]="selectedSource"
        (selectChange)="selectChange($event)">
 </app-radio-list>

按照如上步骤，还缺少对应的selectChange($event):

 selectChange(model: any) {
   this[model.name] = model.value;
 }

总结

以上所述是小编给大家介绍的Angular5中提取公共组件之radio list的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • Js得到radiobuttonlist选中值的两种方法(推荐)

    如下所示: <%@ Page language="c#" Codebehind="WebForm1.aspx.cs" AutoEventWireup="false" Inherits="ajaxselect.OnmouseTitle.WebForm1" %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >

  • jQuery中RadioButtonList的功能及用法实例介绍

    代码分析 复制代码 代码如下: $("#<%= ibSubmit.ClientID%>").click(function() { var flag = true; //alert($("table[id^=ctl]").length); //创建一个checked的arr数组,用于存储每个radiobutton的checked情况 var arr = new Array; $("table[id^=ctl] input[type=radio]&

  • jquery判断RadioButtonList和RadioButton中是否有选中项示例

    复制代码 代码如下: <pre class="html" name="code"> <%--Body 代码--%> <div> <asp:RadioButtonList ID="RadioButtonList1" runat="server"> <asp:ListItem Value="A">a</asp:ListItem> <a

  • ASP.NET控件之RadioButtonList详解

    "RadioButtonList"控件表示一个封装了一组单选按钮控件的列表控件. 可以使用两种类型的 ASP.NET 控件将单选按钮添加到网页上:各个"RadioButton"控件或一个"RadioButtonList"控件.这两类控件都允许用户从一小组互相排斥的预定义选项中进行选择.使用这些控件,可定义任意数目的带标签的单选按钮,并将它们水平或垂直排列. 命名空间:System.Web.UI.WebControls 程序集:System.Web

  • javascript判断是否有对RadioButtonList选项选择

    javascript判断是否有对RadioButtonList选项选择

    写Javascript来判断是否有对RadioButtonList选项选择,效果如下: 准备好RadioButtonList数据源: Cosmetic.vb 复制代码 代码如下: Imports Microsoft.VisualBasic Namespace Insus.NET Public Class Cosmetic Private _ID As Integer Private _Type As String Private _Name As String Private _Weight A

  • js获取RadioButtonList的Value/Text及选中值等信息实现代码

    HTML代码 复制代码 代码如下: <asp:RadioButtonList ID="rbtnCompany" runat="server" RepeatColumns="4" RepeatDirection="horizontal"> <asp:ListItem Value="1" Text="A"></</SPAN>asp:ListItem&

  • ASP.NET服务器端控件RadioButtonList，DropDownList，CheckBoxList的取值、赋值用法

    这三个控件都有一个Items集合,可以用 RepeatLayout 和 RepeatDirection 属性来控制列表的呈现形式.如果 RepeatLayout 的值为 Table,那么将在表中呈现列表.如果设置成 Flow,那么将在没有任何表结构的情况下呈现列表.默认情况下,RepeatDirection 的值为 Vertical.将此属性设置成 Horizontal 将会使列表水平呈现. RadioButtonList:控件提供已选中一个选项的单项选择列表(数据源单选).与其他列表控件相似,

  • ASP.NET jQuery 实例16 通过控件CustomValidator验证RadioButtonList

    ASP.NET jQuery 实例16 通过控件CustomValidator验证RadioButtonList

    界面代码: 复制代码 代码如下: <form id="form1" runat="server"> <div align="center"> <fieldset style="width: 350px; height: 200px;"> <table border="0" cellpadding="3" cellspacing="3&q

  • Angular5中提取公共组件之radio list的实例代码

    本文给大家说一下Radio List的公共组件提取. Radio List组件提取起来很方便,不想Checkbox那么复杂. radio-list.component.ts import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'; import { RadioItem } from '../../model/radio'; import { NgModel } from '@angular/fo

  • vue App.vue中的公共组件改变值触发其他组件或.vue页面监听

    业务场景重现 现在我的App.vue里面有一个头部的公共组件,头部组件里有一个输入框,当我输入词条时,将词条传进App.vue里的<router-view>里的.vue页面,并进行查询获取数据 解决思路如下: 1.如何拿到头部的词条 2.当词条改变时如何触发.vue里的请求数据事件 解决方案 我是用vuex数据仓库来存储词条的,当词条改变时,修改数据仓库里的词条 然后在.vue页面里监听这个词条,当词条改变时触发请求数据的事件 代码 数据仓库store.js import Vue from '

  • webpack 从指定入口文件中提取公共文件的方法

    在不明白CommonsChunkPlugin的使用情况下,直接上手webpack4的splitChunks,实在是难上加难.为了能更好的理解splitChunks的使用,必须出个题目,练练手,才能从中有所收获(下面的题目不考虑实际应用场景): 从指定入口文件中提取公共文件 CommonsChunkPlugin的实现: entry: { index:'./src/index.js', index1:'./src/index1.js', index2:'./src/index2.js' }, plu

  • Spring组件自动扫描详解及实例代码

    Spring组件自动扫描详解及实例代码 问题描述 一个系统往往有成千上万的组件,如果需要手动将所有组件都纳入spring容器中管理,是一个浩大的工程. 解决方案 Spring 提供组件扫描(component scanning)功能.它能从classpath里自动扫描.侦测和实例化具有特定注解的组件.基本的注解是@Component,它标识一个受Spring管理的组件.其他特定的注解有@Repository.@Service和@Controller,它们分别标识了持久层.服务处和表现层的组件.

  • vue中element-ui表格缩略图悬浮放大功能的实例代码

    vue中element-ui表格缩略图悬浮放大功能的实例代码

    element-ui界面非常简洁和美观,提供的组件可以满足绝大多数的应用场景,当表格中显示了图片的缩略图时,想要鼠标浮动在缩略图上时放大图片的效果,该如何实现呢?element-ui虽然没有直接提供图片悬浮放大的组件,但是可以使用Popover弹出框组件,一样实现效果,如下: 具体的代码(此处只是图片单元格的代码,其它代码省略): <el-table-column prop="picture" header-align="center" align="

  • iOS 中根据屏幕宽度自适应分布按钮的实例代码

    iOS 中根据屏幕宽度自适应分布按钮的实例代码

    下载demo链接:https://github.com/MinLee6/buttonShow.git 屏幕摆放的控件有两种方式,一种根据具体内容变化,一种根据屏幕宽度变化. 下面我分别将两个方式,用代码的方式呈现: 1:根据具体内容变化 // // StyleOneViewController.m // buttonShow // // Created by limin on 15/06/15. // Copyright © 2015年 信诺汇通信息科技(北京)有限公司. All rights

  • Android开发中通过手机号+短信验证码登录的实例代码

    首先,需要一个电话号码,目前很多账户都是将账户名设置成手机号,然后点击按钮获取手机验证码. 其次,你需要后台给你手机短信的验证接口,各个公司用的不一样,这个身为前端,不需要你来考虑,你只要让你后台给你写好接口,你直接调用就好了. activity_login.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.andr

  • iOS中只让textField使用键盘通知的实例代码

    代码: #import "ViewController.h" @interface ViewController () @end @implementation ViewController - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view, typically from a nib. //为textField增加键盘事件 [[NSNotificati

  • java的Map集合中按value值进行排序输出的实例代码

    java的Map集合中按value值进行排序输出的实例代码 import java.util.Arrays; import java.util.Comparator; import java.util.HashMap; import java.util.Map; import java.util.Set; public class Test { public static void main(String[] args) { Map<String ,Integer> map = new Has

  • C++中vector可以作为map的键值实例代码

    因为项目中需要根据状态找到一个对应的结果,就采用了map的结构,但是状态本身较为复杂,存在一个vector中.上次使用map的经验是自定义类类型作为键值必须重载<操作符,因为map的快速查找是基于红黑树的构建,因而键值必须能相互之间比较.所以担心vector作为类类型的键值会引发一些错误,就写了一个例子测试.结果证明vector可以直接作为map的键值使用. #include<iostream> #include<string> #include<vector>

随机推荐