从ng-repeat动态生成复选框
ng-repeat是AngularJS框架中的一个指令，用于在HTML模板中循环遍历一个集合，并根据集合中的每个元素生成相应的HTML代码。在这个问答内容中，ng-repeat被用于动态生成复选框。
具体答案如下：
ng-repeat动态生成复选框的步骤如下：
- 首先，确保你已经引入了AngularJS框架，并在HTML页面中进行了相应的配置。
- 在HTML模板中，使用ng-repeat指令来循环遍历一个集合，并生成复选框的HTML代码。例如，假设有一个名为items的数组，可以使用以下代码生成复选框：
<div ng-repeat="item in items">
<input type="checkbox" ng-model="item.selected">{{ item.name }}
</div>在上述代码中，ng-repeat指令会遍历items数组，并为数组中的每个元素生成一个复选框。ng-model指令用于绑定每个复选框的选中状态到item.selected属性上。
- 在控制器中，定义items数组，并初始化每个元素的属性。例如：
$scope.items = [
{ name: 'Item 1', selected: false },
{ name: 'Item 2', selected: true },
{ name: 'Item 3', selected: false }
];在上述代码中，定义了一个包含三个元素的items数组，并初始化每个元素的name和selected属性。
- 最后，可以通过访问$scope.items数组来获取用户选择的复选框状态。
ng-repeat动态生成复选框的优势是可以根据集合的内容自动创建相应数量的复选框，并且可以方便地绑定每个复选框的选中状态到相应的数据模型上。
应用场景：
- 在表单中需要展示多个选项，并允许用户选择多个选项时，可以使用ng-repeat动态生成复选框。
- 在展示一组数据，并需要让用户选择其中的多个项时，也可以使用ng-repeat动态生成复选框。
推荐的腾讯云相关产品和产品介绍链接地址：
- 腾讯云云服务器（CVM）：提供灵活可扩展的云服务器实例，满足不同规模和需求的应用场景。详细信息请参考：https://cloud.tencent.com/product/cvm
- 腾讯云对象存储（COS）：提供安全、稳定、低成本的云端存储服务，适用于图片、音视频、文档等各类数据的存储和管理。详细信息请参考：https://cloud.tencent.com/product/cos
- 腾讯云云数据库MySQL版（TencentDB for MySQL）：提供高性能、可扩展的云数据库服务，适用于各类应用的数据存储和管理。详细信息请参考：https://cloud.tencent.com/product/cdb_mysql
- 腾讯云云函数（SCF）：提供事件驱动的无服务器计算服务，帮助开发者更轻松地构建和管理应用程序。详细信息请参考：https://cloud.tencent.com/product/scf
相关·内容
我有一个通过ng-repeat填充的列表，在这个列表中我有一个嵌套列表，每个列表上都有一个按钮。现在，单击该用户界面后，我希望从服务器加载列表，该列表可以是动态的。目前它正在重写该字段。这是我的代码。
<ul class="qtree">
<li ng-repeat="Childgroup in childGroups">
<span class="glyphicon glyphicon-remove del-btn-tree" data-ng-click="deleteChildGroup(Ch
浏览 0提问于2014-08-05得票数 0
5回答
我正在尝试从对象数组生成一组复选框。我的目标是让复选框动态地将它们的ng-model映射到将提交到数组中的新对象的属性。
我的想法是这样的：
<li ng-repeat="item in items">
<label>{{item.name}}</label>
<input type="checkbox" ng-model="newObject.{{item.name}}">
</li>
这不能像在这个JSFiddle上看到的那样工作：
有人能帮上忙吗？
浏览 0提问于2013-01-06得票数 82
回答已采纳
2回答
<div class="check">
<label><span ng-repeat="prod in products">
<input type="checkbox" ng-model="prod.cid" value="" ng-change="OnCheck()">
{{prod.c}}</br></br>{{prod.cid}}</br>
</span>
</div>
在上面的ht
浏览 1提问于2014-07-14得票数 1
回答已采纳
我根据动态数据使用ng-repeat创建了许多复选框，我想用动态数据设置复选框的ng-true-value，即一个字符串，我的代码如下：
<div ng-app="myApp" ng-controller="PostList">
<ul>
<li ng-repeat="ff in totalFeatures">
<input type="checkbox" ng-model="checkBoxMo
浏览 1提问于2015-12-18得票数 2
我的ng-repeat输入字段是动态字段，如果勾选了显示的ng-repeat输入字段复选框，则还会启用添加更多按钮。如果我单击ADD More按钮，相同的一组输入字段正在显示，我需要使用ng-required / required选项验证我的ng-repeat输入字段复选框状态将为true (选中)。
请给我一个使用ng-required = "true“/ required的解决方案。
谢谢。
浏览 2提问于2017-10-03得票数 0
1回答
我使用ng-repeat在表格上呈现list data $scope.displayMatches = []。
<tbody>
<tr ng-repeat="match in displayMatches">
<td>{{match.Name}}</td>
<td colspan="2">
<div class="ui fitted toggle checkbox">
<input type=
浏览 2提问于2015-11-02得票数 1
我正在创建动态单选按钮和复选框.But当输入它们的标签时，我们如何才能进行验证，以使下一个控件的名称不会重复
<span style="padding-left: 20px" ng-repeat="r in field.rbtn track by $index | unique:'r.radioname'" >
<input type="radio" id="radio_{{$index}}">{{r.radioname}}
</span>
为此，我使用了类似于this
浏览 0提问于2015-11-16得票数 0
2回答
我正在通过ng-重复动态创建物质化复选框。问题是，在物化中，复选框标签上的“for”必须与input上的id对应：
<div class="checkbox-patient-info-medical">
<input type="checkbox" id="medical-checkbox">
<label for="medical-checkbox"> Prior Authorization Required*</label>
</div>
我用ng重复生成字段
浏览 9提问于2016-11-24得票数 0
回答已采纳
我有一个应用程序，我在其中调用服务器上的业务列表，并使用ng-repeat将其显示为视图中的复选框：
<md-checkbox
ng-repeat="business in businesses"
ng-model="business.$index"
value="business._id"
aria-label="Checkbox"
>
{{business.business_name}}
</md-
浏览 0提问于2017-06-01得票数 0
我的AngularJS 1.6应用程序中有一个组件，它使用ng-repeat动态生成复选框，如下所示：
<div ng-repeat="subItem in item.ChildItemTypes">
<md-checkbox class="md-primary" ng-model="subItem.checked">{{ subItem.Description }}</md-checkbox>
</div>
此组件不包含<form>元素，因为它设计为放置在窗体中。
如何访问组件
浏览 1提问于2017-03-20得票数 0
回答已采纳
1回答
我希望创建一个包含复选框矩阵的动态表(例如5X5 )，并为每个复选框分配一个模型，
<tr ng-repeat="parentItem in Items>
<td>{{parentItem.name}}</td>
<td ng-repeat="childItem in Items>
<input id="{{ parentItem.id }}_{{childItem.id}}" type="checkbox"
浏览 2提问于2014-02-10得票数 1
回答已采纳
我是前端网络开发的新手。我正在使用AngularJS动态创建复选框。
<div ng-repeat="x in Brands" style="margin-left: 20px">
<input type="checkbox" ng-model="newObject[x.product_brand]">
<label> {{ x.product_brand }} </label>
</div>
按照以下链接提供的方法，我希望使用动态创建的复选框隐藏/显示div
浏览 2提问于2017-03-11得票数 2
回答已采纳
3回答
我正在使用AngularJS，我有一个用ng-repeat生成的带有复选框的表单。我想动态生成每个checkbox的id，我尝试这样做：
<label ng-repeat="x in placeTypes">
<input type="checkbox" id='{{x.value}}'>
{{x.display}}
<br>
</label>
但是，当我尝试通过Id获取元素时，元素是null。
浏览 4提问于2017-11-14得票数 1
2回答
*这里是html复选框代码，它使用复选框从数据库进行动态值初始化，但是复选框没有选择任何值*
<div class="widget-body" style="display: block;">
<div class="widget-main">
<div class="table-responsive">
浏览 2提问于2016-12-10得票数 0
回答已采纳
2回答
我希望通过单击相关类别名称复选框筛选出问题。例:如果只选中X类复选框，则只会显示带有X类的问题。
我能够将名称Cat1、Cat2等直接绑定到catfilters对象：
<input type="checkbox" ng-model="catfilters.Cat1" /> Cat 1
<input type="checkbox" ng-model="catfilters.Cat2" /> Cat 2
<ul>
<li ng-repeat="
浏览 1提问于2015-10-11得票数 3
我试图添加一些动态的复选框到我的网站，并过滤基于他们的价值。
我在通过ng模型将每个过滤器添加到filters对象的部分失败了。
<div ng-repeat="filter in menu.filters">
<label>{{filter.title}}</label>
<input type="checkbox" ng-model="filters.filter{{$index+1}}" ng-true-value="{{filter.stub}}" ng-false
浏览 0提问于2014-01-23得票数 3
回答已采纳
我的应用程序中有一个<select>，它是从ng-repeat提供的数据，但select中的每个选项都有自己的数据。非常简单，下面是我正在使用的JSON有效负载：
{
"0":{
"name":"Mover",
"scalar":[
{
"name":"Size",
"unit":"m"
},
浏览 0提问于2017-01-18得票数 1
我有一个指令，托管一个接受JSON的模板(包含一些用于构建表的数据，以及一些操作数据的方法)并生成一个表。
模板中的相关代码：
<table class="table" id="table_{{table.name}}">
<thead>
<tr>
<th ng-repeat="header in table.headers track by $index">{{header}}</th>
</tr&
浏览 3提问于2016-06-13得票数 1
回答已采纳
2回答
我使用的是bootstrap 3模式，其中我动态生成复选框。它工作得很好。我需要在同一行上对齐复选框。所以我用了
<div class="row" >
<div ng-repeat="item in selectedFields">
<md-checkbox ng-model="checkbox" class="col-xs-12" aria-label={{item.name}}>
浏览 5提问于2015-02-25得票数 2
1回答
我有一个角控制器，从我的服务器获取json并动态显示它们。守则是：
<div ng-controller="myImgController">
<div ng-repeat="img in imgs">
<div ng-repeat="i in img">
<img ng-src="{{i.id}}"/>
</div>
</div>
</div>
如何通过动
浏览 3提问于2015-10-01得票数 0
回答已采纳
这个问题对我来说有点棘手，所以我会尽力解释的。我正试图用动态ng模型正确地实现具有ng真值的角复选框。
<div ng-app="myApp">
<div ng-controller="MyCtrl">
<div ng-repeat="asset in asset">
<h5>{{ asset.title }} categories are...{{ asset.category[0] + " and " + asset.category[1] }}<
浏览 6提问于2015-05-15得票数 1
回答已采纳
2回答
我有一个复选框列表，需要计数复选框。
<div id="list" ng-controller = "listContr as ilist">
<ul>
<li ng-repeat = "item in ilist.items| filter: searchText">
<input type = "checkbox" ng-model="item.done" id="ch">
</li>
</ul
浏览 3提问于2014-08-11得票数 0
回答已采纳
有人能帮我建立角度js自定义过滤器。
我已经从记录(Json数据)构建了两个动态过滤器(品牌和商人)来过滤多个复选框的记录。
现在我需要根据选中的复选框过滤记录。最初，应该取消选中所有复选框，并显示所有记录。
根据选择的过滤器，应该选择记录。
我的json数据是
$scope.records = [
{
"MerchantName": "Fashion and You",
"BrandList": " Nike, Fila",
"Description": "Fashi
浏览 1提问于2013-08-29得票数 2
回答已采纳
在这里我想解释一下我的问题。
我使用ng-repeat显示了一个复选框列表，如果我选中了一个特定的复选框，它必须禁用其他复选框。
<label ng-repeat="specific in specifications">
<input id="specifications_chk" value="{{specific}}" ng-model="newObject[specific]" type="checkbox">
{{specific}}
</labe
浏览 0提问于2016-04-19得票数 0
我正在尝试获取一个问题列表(动态检索，因此我们不能硬编码它们)，然后使用ng-repeat将它们列出来，每个选项旁边有一个三个状态复选框(true、false、null)。
下面的代码可以用正确的复选框显示问题，但是每次单击1个复选框时，它们都会更改，因为它们使用的是相同的ng-model (我假设)。
我怎么才能避开这一切？
谢谢
<div class="select-all-checkboxes" flex="100" ng-repeat="(guidCustomerId,item) in items" ng-if="item.
浏览 0提问于2016-10-20得票数 0
回答已采纳
我正在基于模型$scope.config.kind中的值动态地构建表单字段(复选框和下拉列表)。我将根据模型中的值动态地设置每个复选框的模型名称。表单很好地创建，但是当我选择/选中复选框时，它的值会更改为true和false。如何使其标签在选定/未选择时不更改？
<div class="col-md-1">
<div class="form-group">
<label class="sm">Kind</label>
浏览 3提问于2014-10-29得票数 1
回答已采纳
我已经从对象数组中生成了一个动态表，并使用角ui引导将行分页。我还需要实现基于用户选择的表中的行筛选功能。例如，我会从复选框中选择一个或多个城市，并且应该只显示具有匹配城市的行，或者用户将选择特定的名称，或者两者的组合。以下是样本数据：
ctrl.data = [{
id: 1,
name: 'Ram Kumar',
city: 'Delhi',
date: new Date("October 13, 2014 11:13:00")
}, {
id: 2,
name: 'Raman Kumar',
ci
浏览 5提问于2016-07-20得票数 0
1回答
我有一个带有几个复选框的表单，并且正在通过angularjs处理表单。我不知道角，但我读到它，以找到解决我的问题。我希望在加载表单时自动选中复选框。当我看下面的代码时，我什么也不懂，所以我需要你的帮助。
HTML：(我认为这会动态地生成一些表单中的< li >选项)
<ul class="sublist" style="padding-top:{{ $index * 38}}px;" ng-init="index=$index" ng-if="forActive == k" ng-repeat="(k,
浏览 0提问于2014-05-29得票数 0
回答已采纳
1回答
我正在尝试使用check，其中ng-model将基于两个动态值绑定选定的数据。我的代码是：
<div ng-repeat="individualFieldInfo in formInatiatingData">
<div ng-repeat="individualListItem in individualFieldInfo.list"
<input type="checkbox" ng- model=
"userGivenData[individualFieldInfo.
浏览 1提问于2016-08-05得票数 0
在我的问题中，我有一个动态命名的复选框(我已经感谢我的开发人员了)，所以我无法根据ID找到对象。我过去使用过QTP，能够根据对象相对于其他更容易识别的对象的位置来选择对象。在这种情况下，有一个带有说明的复选框列表。虽然复选框名称发生更改，但其旁边列表中的文本保持不变。
是否可以这样说-单击对象A左侧的复选框？
如果有点含糊，很抱歉，我对Selenium还是个新手。只是寻找一个起点，而不是代码中需要的每一个元素。谢谢!
HTML示例：
<div class="select-measures-table">
<div class="ng-scope"
浏览 4提问于2016-08-26得票数 1
1回答
我正在努力使用Jade/Pug设置动态Ids。
我得到了一个带有复选框列的表，并且我试图在这些复选框中设置一个动态/随机id。我正在使用#item$index，但它不起作用。
这是我的代码：
tbody(table-select='ms.tableSelectConfig', ng-model='ms.selected')
tr(ng-repeat='item in ms.items', table-select-item='item')
td
table-select-checkb
浏览 5提问于2017-07-04得票数 0
回答已采纳
Dropdowns可以很好地获取单选按钮的行为并隐藏一个很长的列表...但是我从来没有喜欢过他们..它们需要用户单击才能看到列表，而它们的样式与页面不匹配。
我想用angular找到一种更动态的方式。
如何在选中复选框后显示复选框列表并隐藏所有未选中的复选框？取消选中该复选框应会再次显示所有复选框...
我尝试了下面的方法，但没有任何运气。
<ul>
<li ng-repeat="album in albums | filter: '{{selected}}' ">
<input type="checkbox
浏览 1提问于2016-07-06得票数 0
1回答
动态形式与AngularJs
、、、、
我们有一个基于数据库配置的动态表单。我使用的代码如下所述
但是无法获得选中的复选框元素的值。请带我走过这段路。我正在使用核对表-模型的复选框元素。
<label ng-repeat="cCheck in form.color">
<input type="checkbox" checklist-model="outputs[form.databaseAttr]" checklist- value="cCheck" ng-init="outputs[form.databaseAttr] = fo
浏览 4提问于2014-08-11得票数 0
回答已采纳
我正在使用ng-重复生成一些复选框，如下所示
<input type="checkbox" ng-repeat="item in items" id="{{item.id}} />
有一些10+复选框，如果选中任何一个复选框，我希望从按钮中删除禁用的类。
我试过这样做但不起作用
<input ng-model="master" type="checkbox" ng-repeat="item in items" id="{{item.id}} />
<input type
浏览 2提问于2014-04-25得票数 0
回答已采纳
我给出了一个复选框网格，每当我试图单击任何复选框时，它总是在ng-click中传递相同的复选框。
<tr ng-repeat="partecipant in current_event.partecipants">
<td class="user_cell"><font class="user_name">{{(partecipant}}</font><span class="arrow"></td>
浏览 1提问于2016-03-13得票数 0
1回答
Jenkins插件高级开发
、、、、
我试图在jenkins插件中创建一个高级功能，但不知道从哪里开始。
我想要创建一个表，它在一个列中动态地添加了行和复选框，并获得了所选复选框的值。
请帮帮我。( a)动态生成表。( b)在列中添加复选框并得到选中的值。
浏览 2提问于2016-04-19得票数 0
回答已采纳
3回答
我有一个使用angular的动态填充复选框列表。
<div ng-repeat="X in XList">
<label>{{X.Header}}</label>
<input type="checkbox" name="X" value="{{X.Item.Id}}" />
<p>{{X.Header}}</p>
</div>
我想要一个方法来检索所有选中的复选框的列表。通常我会用
$('input[n
浏览 0提问于2013-08-07得票数 17
回答已采纳
我正在使用角1.5，我试图使用一些逻辑数据，我从微软的图形，这是完全动态的(键和值)，并创建一个下拉列表。我使用输入框工作，但似乎无法让它使用选择框。
工作的输入框。
<input type="text" name="{{prop.name}}" ng-model="vm.filterValues[prop.name]">
<div ng-repeat="uniqueValue in vm.schemaExtentionsUniqueValues">
<div ng-if=&
浏览 1提问于2017-07-05得票数 1
我的代码片段如下..
<div class="sl" ng-repeat="qual in mQuals | orderBy : 'order'">
<div ng-repeat="cList in tList | orderBy:'Priority' " ng-if="c == qualifier.Id">
<p class="sl-text-body--small" title="">
浏览 0提问于2017-09-06得票数 0
2回答
我有动态复选框(任何从1-20复选框)。我想检查是否所有的复选框都未选中。
我已经尝试过奴隶的方法，但没有取得任何成功。
//is true even if it is checked
cy.get('[type="checkbox"]').not("checked");
cy.get('[type="checkbox"]').should('have.attr', 'checked', false)
浏览 12提问于2022-09-08得票数 1
特别是当您尝试生成动态复选框时，如果您想显示一条消息或完全不显示该框，有时会出现动态复选框为空的情况。
浏览 3提问于2016-04-15得票数 0
1回答
嗨，我想动态地创建角度模板，如下所示：
Index.html:
<div ui-view></div>
<ul class="nav-links">
<li ng-repeat="item in items">
<a ui-sref="{{item.id}}"">{{item.name}}</a>
</li>
</ul>
浏览 1提问于2015-11-06得票数 1
如何从angularjs的复选框中获取动态数据？我试图使用下面的代码，但得到了错误：
TypeError:无法读取未定义的属性“0”
<tr ng-repeat="procForAcnts in procForAcnt">
<td>{{procForAcnts[0]}}</td>
<td><input type="checkbox" ng-model="procNums[$index]" ng-chang
浏览 4提问于2017-03-06得票数 0
小提琴：
我有多组复选框，
我需要按钮来取消选中复选框组(动态)
例如：
ng-click="clear(a)";
ng-click="clear(b)";
其中，由于复选框组是a和b，因此每个复选框可能有多个复选框
但我希望使用相同的函数
HTML：
<div ng-controller="IndexCtrl">{{1+1}}
<h2>Products</h2>
<div class="filters col-two">
<a ng-click="cl
浏览 0提问于2016-01-24得票数 0
我正在使用AngularStrap复选框按钮，其中复选框项目来自服务器。因此，我尝试使用ng-repeat，但无法看到所选项的值。请参阅，其中有3种类型的复选框-
一个常规的复选框，它可以工作。
使用ng-repeat引导复选框。它不反映选定的对象值。
重复项目的引导复选框。它起作用了。
请帮助我修复上面的#2，我正在使用ng-repeat选项。
浏览 1提问于2013-07-02得票数 0
回答已采纳
我有一些通过ng-repeat指令呈现的JSON数据，然后通过一些复选框/下拉框和控制器中的一些自定义过滤器函数对结果进行过滤。
我现在想向我的控制器添加一个函数，该函数由一些复选框上的'ng-change‘触发，它可以引用我的'ng-repeat’中的当前项目列表。我意识到我可以从自定义筛选器引用这些值，例如$scope.filterProvider = function(item)，但是这个函数随后会为ng-repeat中的每个项目调用，这不是我想要的-我希望每次选中/取消选中复选框时都调用该函数，并且我需要该函数能够引用ng-repeat中的项目...这对任何人都有意义吗
浏览 0提问于2013-05-28得票数 3
动态复选框不能与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
2回答
我正试图在AngularJS中使用动态筛选器(位置值如US、IN、CA等)显示员工详细信息。作为基于数据的复选框列表，它是从DB获得的。我尝试过多种方法，但都没有成功。请帮助从Checkboxlist中实现动态过滤器。
下面是我的代码示例：
<html>
<body ng-app="myapp" ng-controller="myController">
<div >Location</div>
<table>
<tbody>
浏览 3提问于2016-08-01得票数 4
回答已采纳
如果输入类型是固定的(全文本或全复选框)，请查看plunker 的代码，没有问题，数据绑定正在工作，但如果我动态定义输入类型，第二个输入绑定不起作用，请帮助我。
<ul>
<li ng-repeat="prop in currentNode.props">
{{prop.name}}<input ng-model="prop.value" type="{{prop.type}}"></input>
</li>
</ul>
浏览 3提问于2013-07-11得票数 0
1回答
我有一个JSON对象，如下所示，名为$scope.permissions
{
admission:{create:false,delete:false,read:false,update:false},
student:{forDelete:false,read:false,viewPhone:false},
course:{create:false,delete:false,read:false,update:false},
teacher:{create:false,read:false,contact:false}
}
我想在每一行中创建动态ng模型，如
浏览 2提问于2017-01-22得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
