如何在angular 7中绑定checkbox？
在Angular 7中绑定checkbox可以通过以下步骤实现：
- 在组件的HTML模板中，使用
[(ngModel)]指令将checkbox与组件中的一个布尔类型的属性进行双向绑定。例如，假设组件中有一个名为isChecked的属性，可以将其与checkbox绑定如下：
<input type="checkbox" [(ngModel)]="isChecked">- 在组件的类中，定义
isChecked属性，并初始化为一个布尔值，用于控制checkbox的选中状态。例如：
isChecked: boolean = false;- 可选步骤：如果需要在checkbox状态改变时执行一些逻辑操作，可以使用
change事件。在checkbox上添加(change)事件绑定，并在组件类中定义一个对应的方法。例如，当checkbox状态改变时，打印选中状态：
<input type="checkbox" [(ngModel)]="isChecked" (change)="onCheckboxChange()">onCheckboxChange() {
console.log(this.isChecked);
}以上就是在Angular 7中绑定checkbox的方法。通过双向绑定，可以实现checkbox与组件属性的同步更新，从而实现对checkbox的控制和获取状态。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云云服务器（CVM）：提供弹性计算能力，满足各类业务需求。
- 腾讯云云数据库 MySQL 版：高性能、可扩展的云数据库服务，适用于各种规模的应用。
- 腾讯云对象存储（COS）：安全、稳定、低成本的云端存储服务，适用于海量数据存储和访问。
- 腾讯云人工智能：提供丰富的人工智能服务，包括图像识别、语音识别、自然语言处理等。
- 腾讯云物联网（IoT）：提供全面的物联网解决方案，帮助连接和管理物联网设备。
- 腾讯云区块链服务（BCS）：提供高性能、可扩展的区块链服务，支持快速搭建和部署区块链网络。
- 腾讯云视频处理（VOD）：提供视频上传、转码、剪辑、播放等功能，满足多媒体处理需求。
请注意，以上链接仅供参考，具体产品选择应根据实际需求进行评估和决策。
相关·内容
我有一个angularJS函数，它从复选框集合中获取一个值-哪个复选框被选中(真或假)，并将该信息存储在一个对象中。然后创建一个变量，该变量存储对象的第一个元素的值。如何在html文档中打印此值？我试过这个：
// app.js
var formApp = angular.module('formApp', [])
.controller('formController', function($scope) {
// we will store our form data in this object
$sc
浏览 8提问于2016-07-11得票数 2
7回答
属性绑定与属性插值
、、、、
我读过一篇关于属性绑定和属性绑定之间区别的文章。据我所知，大多数情况下，Angular2更喜欢属性绑定，因为每次数据更改后，DOM都会更新。(如果我错了，请纠正我)。
我有一个自定义组件，并在父组件中使用它。在其中，我有一个名为truevalue的@Input。当我通过属性绑定从父级启动truevalue时，有时它不会改变。我使用了以下代码：
<my-checkbox [(ngModel)]="chkItems" [disabled]="!editMode" [trueValue]="Y"></my-checkbox>
如
浏览 1提问于2016-08-24得票数 36
我有一个这样的HTML复选框和我的函数
<mat-checkbox
[checked]="uncheckrx"
(change)="onClickExpandRx($event.checked)">
Rx
</mat-checkbox>
<button
class="btn btn-default"
id="cancelConfirmForDelete"
(click)="cancelConfirmDelete()"
translate>
浏览 0提问于2019-01-25得票数 0
最近，我注意到更改为一些angular - provider对象，或者更改为我自己的外部作用域(指令的外部，在控制器中)，需要将代码包装在scope.apply()中。
有谁能详细说明一下这种相当奇怪的行为吗？
应用是一种让angular识别在它自己作用域(不同的库等)之外发生的事情的方法，angular指令绝对不属于这个定义。
示例代码：
app.directive('socialAuth', function(utils, authService, $location){
return{
restrict: 'A',
浏览 1提问于2013-11-14得票数 0
如何在我的控制器中检查是否签了多个复选框？
我的标记：
<li ng-repeat="item in Items">
<label>{{item.Name}}
<input type="checkbox" ng-model="item.Selected" />
</label>
</li>
我的守则：
$scope.checkAll = function () {
//i want to check if checkbox checked mor
浏览 1提问于2015-03-02得票数 1
回答已采纳
我已经在Angular scheduler中应用了自定义表单。我已经在该表单上使用了复选框。
屏幕截图： I used this code to render复选框：
<tr *ngFor="let a of packageList">
<td colspan="2" >
<ejs-checkbox id="{{a.Value}}" name="{{a.Text}}" value="{{data[a.Text]}}" label="{{a.Text}}
浏览 0提问于2019-11-08得票数 0
2回答
我是AngularJS的新手，所以我仍然试图掌握最佳实践和做事的“角力方式”。话虽如此，我的情况如下：
我正在尝试提交一份AngularJS表格。表单的一部分是我希望用户从中选择的博客名称列表。每个<li>内部都有一个复选框。当用户单击li时，我希望选中复选框，以便在表单提交时，它记录选定的博客名称。
<li>
<div>
<img ng-src="{{ image }}" />
</div>
<div>
{{ name }}
</div
浏览 1提问于2016-08-17得票数 1
回答已采纳
1回答
我正在尝试在Angular中为我的应用程序创建一个指令，并且需要将值传递给我的控制器
我有像这样的东西
controllers.directive('checkBox', function() {
return {
restrict: 'E',
scope: {
checkAll: '=',
},
template: '<input check-all="checkAll" type="checkbox"
浏览 0提问于2014-07-03得票数 0
我有一个复选框，如果复选框被选中，我需要在加载时显示警报消息application.But问题是复选框在标题组件中，当我将在主页中时，它与主页component.So链接，如果复选框被选中，我需要在加载应用程序时显示警报消息。这是下面的代码，
header.component.html
<div><input checked type="checkbox">Other-component</div>
header.component.ts
import { Component, OnInit } from '@angular/core
浏览 1提问于2019-11-10得票数 0
import {Component,ViewChild} from '@angular/core';
import {NgForm} from '@angular/forms'
@Component({
selector: 'checkbox-configurable-example',
templateUrl: 'checkbox-configurable-example.html',
styleUrls: ['checkbox-configurable-example.css'],
})
expo
浏览 0提问于2017-07-23得票数 0
可以改变ng模型值而不改变ng-更改函数吗？？下列方法不起作用
<div ng-app="myApp">
<div ng-controller="MyCtrl">
<input id="checkbox" type="checkbox" ng-model="field">
<div> {{field}} </div>
</div></div>
<script>
var myapp = angular.mod
浏览 1提问于2017-11-09得票数 1
回答已采纳
here is the quiz.component.html file.
选项值来自服务。我想保存用户的反应使用复选框在这里.when他点击保存按钮。请帮帮我好吗？
<html>
<div class="jumbotron">
<div class="container">
<div class="page-header">
<h1>Quiz </h1>
<h4> Solve Questions Here</h4
浏览 2提问于2017-03-20得票数 0
我在我的angularjs代码中有一个复选框列表。当我单击复选框时，所有复选框都会被激活。如何只检查一个复选框？
这是我的密码
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="namesCtrl">
<p
浏览 2提问于2016-02-25得票数 0
回答已采纳
我有一个复选框，我想要实现的是在复选框被选中时隐藏div，并在Angular 2.0测试版中显示它未被选中。
我知道如何在angular 1.2中使用下面的代码来做到这一点
<label>
<input type="checkbox" ng-model="showhidepregnant"/> Pregnant
</label>
div上的代码
<div
浏览 0提问于2016-02-17得票数 10
1回答
我正试图为我的客户编写一个简单的表单生成器。这个想法是让他们创造一个简单的形式，他们可以在以后的不同场合使用。
为此，我正在创建一个指令，通过一个指令将json表单解析回html。
angular
.module('myApp')
.directive('formbuilder', ['$timeout', '$compile', '$parse', function($timeout, $compile, $parse) {
return {
restrict:&#
浏览 6提问于2017-02-04得票数 0
回答已采纳
我是Angular JS的新手，面临着解析语法问题。我只是在挠头。尝试了许多解决方案，但仍然无法解决...请帮我解决这个问题。提前谢谢。
代码如下：
<tr ng-repeat="Record in Records">
<td>
<div class="checkbox">
<input type="checkbox" id="{{Record.id}}"
浏览 0提问于2015-02-20得票数 0
我在侧边栏上有一个复选框列表，用于分面导航，当屏幕宽度很小时，这个侧边栏是隐藏的，这是一个响应式的设计，然后有一个按钮来使画布外的侧边栏(这是完全相同的)出现。我现在的代码是这样的，面是不同的权重：
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<li ng-repeat="attr in layout.facettes.weight">
<input id="fa
浏览 10提问于2016-01-19得票数 1
我设计了一个基于mat-checkbox的自定义过滤器(共享)组件。
<ul>
<li *ngFor="let value of values">
<mat-checkbox [(ngModel)]="value.active" (ngModelChange)="emitState()">
{{value.title}}
</mat-checkbox>
</li>
</ul>
---
import { Component, forwar
浏览 2提问于2021-11-30得票数 0
回答已采纳
2回答
我们如何在Angular ( 2.x及更高版本)中获取DOM元素？诸如addClass、removeClass等基本功能在typescript中不可用，那么我们如何在angular组件中进行这些DOM操作呢？如果有的话，请给我建议。提亚
浏览 0提问于2016-11-07得票数 12
回答已采纳
我是angularJS的新手。我想使用指令中的模板动态创建复选框。我在单独的文件中创建了控制器和指令。我在template in directive中创建了checkbox，并希望在点击checkbox时调用控制器的函数，但我无法这样做。以下是我的代码示例。
Controller:
var app=angular.module('abc',[]);
app.controller('DemoCtrl', function($scope) {
$scope.ctrlFn = function(test) {
alert("hi "+
浏览 1提问于2014-10-28得票数 0
1回答
我想用有棱角材料的angular2 .下面是我的package.json
{
"name": "angular2-boilerplate",
"version": "1.0.0",
"scripts": {
"lite": "lite-server",
"gulp": "gulp",
"start": "concurrent \"npm run gulp\" \"npm
浏览 3提问于2016-05-12得票数 1
回答已采纳
1回答
<div class="noteCheckBox">
<input type="checkbox" id="noteCheckBox" [checked]="checkbox" (change)="stateCheckBox()">
<label for="noteCheckBox" class="noteLabel">AnyText</label>
</div>
TypeScript
import
浏览 3提问于2016-10-17得票数 1
回答已采纳
3回答
我正在使用angular，我不确定是不是有问题。所以我有一个复选框，当我点击它时，它可以工作，但当我需要选择另一个对象时，我需要点击它。它(checkbox)似乎有以前的状态。如果我选择另一个元素来点击，我需要它。它具有默认状态(即untick (false))。
.ts
show = false
toggleContract() {
this.show = !this.show
}
.html
<p-checkbox (click)='toggleContract()' [ngModel]="show"></p-checkbox&g
浏览 0提问于2021-06-18得票数 1
1回答
这是我的HTML：
<ul id="limitations" name="limitations" class="dropdown-menu">
<li>
<div class="checkbox checkbox-default">
<input type="checkbox" id="limitation-checkbox-0" value="8" name="limitations[0]
浏览 3提问于2016-07-20得票数 0
回答已采纳
2回答
我一直试图在Angular2/4中创建类似于页面呈现文件时的内容，如果文件存在，则显示复选框图标，如果不存在，则显示下载图标。但是它会运行到无限循环中，建议使用布尔变量，但是我的元素是动态的，可以有任意数量的下载链接，因此预定义变量不是一个选项。
Angular2码
<div *ngFor="let item of getItems();">
<div ngIf="fileExists(item.url); then example2 else example1"></div>
<ng-template #exa
浏览 1提问于2017-09-30得票数 2
回答已采纳
我使用的是Angular 11和一个带有表单组的表单。我的表单中有几个字段，我希望根据外部环境设置这些字段的启用/禁用。这适用于预期的输入域。
我在堆栈闪电战中做了一个简单的例子：
我做了什么，我有我的应用程序-Component.ts：
import { Component, VERSION } from "@angular/core";
import { FormGroup, FormBuilder, Validators } from "@angular/forms";
@Component({
selector: "my-app"
浏览 8提问于2021-03-11得票数 1
我试图制作一个简单的角度2组件，显示一个开关按钮。它几乎是工作的，除非父值在使用ngModel时没有更新。
以下是我的自定义组件：
import { Component, Input, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'app-switch',
template:`
<label class="switch">
<input id="switch" type="checkbox" [(n
浏览 3提问于2017-03-29得票数 2
回答已采纳
我不是角度事件方面的专家，但这是我的问题。如果我运行下面的代码，我基本上是在用错误的信息更新后端，因为在触发togglePlatform()之前，item.their_platform不会改变。
模板：
<mat-checkbox (ngModelChange)="togglePlatform()" [(ngModel)]="item.their_platform"></mat-checkbox>
TS：
togglePlatform(){
//update backend with the new value for it
浏览 42提问于2020-06-06得票数 3
回答已采纳
我有一个简单的angularJS应用程序，它有模块、控制器、服务和指令；还有模板html页面，它保存了表单变量和结构，并在主html页面中打印，index.page使用的是工作良好的指令。现在我有了ng- its =“submitForm()”格式，但是当我按submit时看不到任何数据；在firebug中，它说的是未定义的$scope.submitForm.Employee。
详细情况如下：
Error: $scope.submitForm.employee is undefined
efController/$scope.submitForm@http://localhost:59662/
浏览 1提问于2016-01-08得票数 0
回答已采纳
如何将AngularJS作用域对象转换为简单的JS数组？
此函数检查是否选中了任何复选框，并将相应的值添加到对象。现在，我希望将对象值传输到一个数组中，并在按下按钮后向其发出警报。但是结果是不确定的，为什么呢？
var formApp = angular.module('formApp', [])
.controller('formController', function($scope) {
// we will store our form data in this object
$scope.formData
浏览 0提问于2016-07-11得票数 2
我正在使用protractor测试一个基于ionic 2和angular 2的应用程序。我想测试一下是否以及何时检查了ion-checkbox。假设页面中只有一个checkBox，我尝试过这样做：
var checkBox = element(by.css('ion-checkbox'));
expect(checkBox.isSelected()).toBe(true);
以上测试无法正常工作，因为即使选中了checkBox，属性isSelected()也始终为false。据我所知，没有isChecked()属性。那我怎么测试它呢？
浏览 0提问于2016-12-19得票数 0
1回答
在我的项目中，我已经使用了jQuery插件(datepicker和iCheck)，并且可能会使用更多的插件。我已经设法从angular调用了jquery插件方法，但是angular的双向数据绑定在使用jQuery插件的元素上不起作用。
例如，我的模板中有复选框，如
<div class="checkbox icheck">
<label >
<input type="checkbox" id="rememberMe" #rememberMe [(ngModel)]="rememberMeCh
浏览 14提问于2017-03-23得票数 0
当我尝试将angular js与语义ui集成时，我遇到了一个问题(数据绑定不起作用)，特别是当我使用单选按钮字段时，比如下面的代码：
这个html
<div ng-controller="MyCtrl">
<div class="ui form">
<div class="field">
<div class="ui radio checkbox">
<input
浏览 3提问于2015-05-05得票数 0
我有一个问题，试图让Bootstrap4复选框在angular 6+中使用全选和取消全选选项。当我在这里使用原始代码时，我可以让它工作：
但问题是Bootstrap使用不同的事件来单击它们的复选框。有人有解决这个问题的办法吗？
<div class="form-check">
<input class="form-check-input" type="checkbox" (change)="selectAll()">
<label class="form-check-label
浏览 6提问于2018-08-10得票数 6
回答已采纳
2回答
如何在每个列表项旁边放置按钮？
<asp:CheckBoxList ID="lstBrembo" runat="server">
<asp:ListItem Text="Popular" Value="9"></asp:ListItem> // <--- button here
<asp:ListItem Text="Pads" Value="70"></asp:ListItem>
<asp:ListIt
浏览 0提问于2012-11-16得票数 0
回答已采纳
2回答
我试图创建一个默认标记的“v复选框”条目，而不使用v模型指令。
在这个Vuetify组件的正式文档中，我找不到关于如何做到这一点的信息。
我试着把这段代码放进去，但它不起作用
<v-checkbox checked="true"></v-checkbox>
<v-checkbox checked="checked"></v-checkbox>
<v-checkbox checked></v-checkbox>
浏览 3提问于2020-10-12得票数 1
回答已采纳
在这里，我分享我的角度代码：
1. app-component.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-all-trades',
templateUrl: './all-trades.component.html',
styleUrls: ['./all-trades.component.css']
})
export class AllTradesComponent implements On
浏览 1提问于2020-11-07得票数 1
回答已采纳
2回答
我想以编程方式取消选中复选框。我知道如何在javascript中使用它，但由于我使用的是angular，所以我认为它是不同的。
下面是jsfiddle的链接：
这是我第一次使用jsfiddle，所以如果你看不到脚本和html，请让我知道。
这是html
<input type="checkbox" ng-model="v" ng-click="checkAll()" />
<button ng-click="x()">eto</button>
这就是angular
$scope.x = func
浏览 2提问于2015-02-27得票数 11
回答已采纳
我有一种情况，我必须取消复选框，点击一个按钮。
这是我的复选框代码
<ion-checkbox [checked]="!isChecked" [disabled]="!isdisabled" (ionChange)="saveProfile($event)" [(ngModel)]="default"></ion-checkbox>
我试过使用!iChecked，但是它不起作用。基本上，如果用户已经选中了复选框，我希望在单击按钮时(根据特定条件)不选中复选框。
<button class="b
浏览 1提问于2018-01-12得票数 1
回答已采纳
动态复选框不能与ng-model正确绑定
var app = angular.module('plunker', []);
json = [{"name":"john"},{"name":"Amy"}];
app.controller('MainCtrl', function($scope) {
$scope.checked = false;
$scope.data = json;
});
<script src="https://ajax.googleapis.co
浏览 5提问于2015-08-29得票数 0
我有一个Angular 6应用程序，想测试一下mat-checkbox的绑定工作。我有这个模板：
<div style="text-align:center">
<mat-checkbox id="singleCheckBox" [(ngModel)]="isChecked">Check me!</mat-checkbox>
</div>
这段代码是：
import { Component } from '@angular/core';
@Component({
selec
浏览 3提问于2018-08-31得票数 3
回答已采纳
3回答
我想知道如何使用Angular2使复选框在值为真时被选中，如果值为假则取消选中。
Adult <input type="checkbox" value="{{person.is_adult}}">
{{person.is_adult}}是一个boolean
有没有人能提点建议？谢谢
浏览 1提问于2016-08-31得票数 20
回答已采纳
3回答
我是个身材矮小的新手
我有指令和控制器。在示例中，我想要的是在单击文本时更改复选框值(true/false)，以及单击控制器中文本所在的外部div。
示例：
HTML
<div ng-app="miniapp">
<div ng-controller="myController">
<add-checkbox></add-checkbox>
<div ng-click="changeCheckbox()">
Change Check V
浏览 2提问于2017-02-06得票数 0
回答已采纳
为什么“这个”周围的一个天使的项目不起作用？
我有一张这样的桌子
<table>
<tr ng-repeat="brand in brands">
<td>{{brand.name}}</td>
<td>
<input id="orderInput" onkeyup="setOrder({{brand.id}}, this.value);"
type="text" class="form-control form-c
浏览 1提问于2019-02-05得票数 1
回答已采纳
14回答
角2复选框双向数据绑定
、、、、
我是Angular2的新手，我有个小问题：
在我的Login-Component-HTML中，我有两个复选框，我想用两种方式将它们绑定到登录组件类型记录。
这是HTML:
<div class="checkbox">
<label>
<input #saveUsername [(ngModel)]="saveUsername.selected" type="checkbox" data-toggle="toggle">Save username
</label>
</d
浏览 13提问于2016-10-24得票数 263
回答已采纳
我一直试图学习如何使用角的@输入装饰，由于某种原因，我不知道什么是错误的。
我已经在我的应用程序组件中正确地导入了FormsModule，但是我仍然得到了上面的错误。有人能帮忙吗？
我有没有什么地方看不见的地方有打字错误？
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/htt
浏览 1提问于2018-12-05得票数 0
在我的应用程序中，我经常使用复选框。由于重复，我想用它来做一个自定义指令，但是当我在html中调用这个指令时，它不会选中复选框。我不知道我错过了什么。如有任何建议，将不胜感激。
<div class="col-xs-12 col-sm-9 col-md-9">
<input type="checkbox"
class="form-control"
name="{{attrs.name}}"
id="{{attrs.id}}"
da
浏览 1提问于2018-04-29得票数 0
1回答
我正在尝试构建一个表单，它将获取可能以多种不同格式(每周、每月、其他格式)提供的调度信息。我计划在表单中有一个调度部分，用户可以通过单选按钮组选择计划的类型。如果选择了每周选项，一组复选框将与工作日一起出现，以便您可以选择周中的天数。如果是每月，那么就可以选择月份的日期，以此类推。我试过用*ngIf的方式让事情出现，但它不起作用，而且我没有收到任何错误信息。对于如何实现这一点，有什么想法吗？
我使用的是：-Angular材料元素-Angular 2 (8) -Angular反应形式
我已经实现了其中的一部分，下面是单选按钮的代码和我想要隐藏的第一个调度部分(对代码格式不佳表示歉意，但仍在计算堆
浏览 1提问于2019-06-21得票数 0
回答已采纳
我正在尝试理解angular 1摘要循环是如何工作的，以及它们如何影响现有的作用域。我有两个控制器，其中一个是使用转发器的角度材质。第二个控制器是一个简单的按钮单击事件。这两个事件都会打印到控制台，以查看发生了什么。
我看到的是，每次我点击第二个控制器上的按钮，中继器都会重新运行它的整个计算？
这就是angular的工作原理吗？请参阅附件中的代码-当点击按钮时，中继器每次都会在第一个控制器上重新运行。我假设每次在任何控制器上发生任何操作时，都会发生这种情况--这看起来很疯狂。
中继器代码如下：
<div flex="50" ng-repeat="item in i
浏览 0提问于2015-12-23得票数 0
我最近升级了角-2版本从贝塔-17到RC4.
我看到了这个问题的解决办法，。
我的问题与这个问题的答案有关。
我更新了我的boot.ts
import { bootstrap } from '@angular/platform-browser-dynamic';
import { provide, enableProdMode, PLATFORM_DIRECTIVES } from '@angular/core';
import { LocationStrategy, HashLocationStrategy } from '@angular/commo
浏览 3提问于2016-07-26得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
腾讯会议活动推荐
腾讯云开发者
