javascript - 我想用 Angular 获取单选按钮的值
问题描述
我想获得我的单选按钮的值,特别是已选择的那个。我确实尝试通过以下代码来做到这一点:我的 home.component.html
<span>Categories</span>
<input type="button" onclick="alert($('input[name=category]:checked').attr('id'))" value="click me too" />
<div id="categorybox">
<tr class="categories" *ngFor="let category of categories">
<td>
<input type="radio" id={{category.category}} name="category" value="{{category}}"/>
<label for ={{category.category}} >{{category.categoryName}}</label>
</td>
</tr>
</div>
我在弹出窗口中变得不确定,我不知道为什么。我想使用 id 将信息传递给 http 请求,以便我可以按类别显示我的产品。我希望它从我的 api 链接到我的类别列表,这样当我添加一个类别时,它就会显示为单选按钮。我只需要通过我的函数来获得那个值。代码在 html 中以提高可读性。我想在单击时获取一个按钮的值。
我的 home.component.ts
import { Component, OnInit } from '@angular/core';
import {Home} from '../model/Home';
import {HomeService} from '../service/Home.service';
import {Category} from '../model/Category';
import {CategoryService} from '../service/Category.service';
declare var $: any;
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
page= 0;
home: Home[];
categories: Category[];
constructor(private homeService: HomeService,private categoryService: CategoryService) { }
Category($event){
}
SortPrice($event:any){
let icon = document.getElementById("asc-desc1");
if(icon.className === "fas fa-angle-down"){
icon.className ="fas fa-angle-up";
this.homeService.getByPriceAsc().subscribe(data => {
this.home = data;
});
}else{
icon.className ="fas fa-angle-down"
this.homeService.getByPriceDesc().subscribe(data => {
this.home = data;
});
};
}
SortSale($event:any){
let icon = document.getElementById("asc-desc2");
if(icon.className === "fas fa-angle-down"){
icon.className ="fas fa-angle-up";
this.homeService.getBySaleAsc().subscribe(data => {
this.home = data;
});
}else{
icon.className ="fas fa-angle-down"
this.homeService.getBySaleDesc().subscribe(data => {
this.home = data;
});
};
}
SortDiscount($event:any){
let icon = document.getElementById("asc-desc3");
if(icon.className === "fas fa-angle-down"){
icon.className ="fas fa-angle-up";
this.homeService.getByDiscountAsc().subscribe(data => {
this.home = data;
});
}else{
icon.className ="fas fa-angle-down"
this.homeService.getByDiscountDesc().subscribe(data => {
this.home = data;
});
};
}
ngOnInit() {
this.homeService.getAll().subscribe(data => {
this.home = data;
});
this.categoryService.getAll().subscribe(data => {
this.categories = data;
});
}
}
解决方案
你应该绑定你的收音机并添加一个点击事件。另外,我认为您的名字对于您的输入来说并不是唯一的。
在 TS 中:
<input type="radio" id={{category.category}} [(ngModel)]=selectedCategory name="{{category.categoryName}}" value="{{category}}" (click)=selectCategory(category)/>
在 HTML 中:
export class HomeComponent implements OnInit {
public selectedCategory: Category
public selectCategory (category) {
// do something here
// this.selectedCategory will be the selected value
// the category will be the value that was just selected
}
推荐阅读
- sql - 在 VBA Access 中运行连接到另一个数据库的查询
- response - 在 Wicket 7.10 中写入响应后重定向
- python - Python SQLAlchemy 和 SQLite - 外键
- r - 数据框:对某些变量表示平均值,忽略但保留其他变量
- mysql - 优化具有 17 亿条记录的 MySQL 脚本
- javascript - remove active class on the next element
- jquery - Angularjs 与 iCheck jquery 冲突,无法从单选按钮获取数据
- ios - 如何在 swift 4 中将徽章放在 UIBarButtonItem 上?
- express - 尝试呈现翡翠模板时无法读取未定义的属性“用户名”
- c# - 从 Visual Studio 2017 使用 OData 服务