我建立了一个 Accordion 列表，每个 Accordion 代表一组元素。 我使用 ng-repeat 遍历组名，每个组都有一个复选框，指示它是否被选中。
该示例适用于单组 Accordion ，但当我将 Accordion 放入 ng-repeat 时，复选框根本无法选中。
这是代码，每个组标题的主要复选框显然不起作用，我试图找出原因。
我的主要问题是:
1.如何激活Group1和Group2和Group3的复选框，以便我可以正确选择它们，在目前的情况下，我根本无法选中(Group1，Group2和Group3)的复选框。
var app = angular.module('app',[]);
app.controller('mainCTRL',function($scope){
$('.collapse').collapse();
$scope.title="Hello World";
$scope.items1 = ['Group1','Group2','Group3']
}).ui-checkbox {
display: none;
}
.ui-checkbox + label {
position: relative;
padding-left: 25px;
display: inline-block;
font-size: 14px;
}
.ui-checkbox + label:before {
background-color: #fff;
/**#fff*/
border: 1px solid #1279C6;
padding: 9px;
border-radius: 3px;
display: block;
position: absolute;
top: 0;
left: 0;
content: "";
}
.ui-checkbox:checked + label:before {
border: 1px solid #1279C6;
color: #99a1a7;
}
.ui-checkbox:checked + label:after {
content: '\2714';
font-size: 14px;
position: absolute;
top: 1px;
left: 4px;
color: #1279C6;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js">
</script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div ng-app="app" ng-controller="mainCTRL">
<div ng-repeat="item in items1">
<div class="panel-group driving-license-settings" id="accordion-{{$index}}">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion-{{$index}}"
data-target="#collapseOne-{{$index}}">
<input type="checkbox" class="ui-checkbox" id="chk1-{{$index}}" value="">
<label for="chk1-{{$index}}">{{item}}</label>
</a>
</h4>
</div>
<div id="collapseOne-{{$index}}" class="panel-collapse collapse ">
<div class="panel-body">
<div class="driving-license-kind">
<div class="checkbox">
<input type="checkbox" class="ui-checkbox" id="chk2-cb-{{item}}-1" value="">
<label for="chk2-cb-{{item}}-1">A</label>
</div>
<div class="checkbox">
<input type="checkbox" class="ui-checkbox" id="chk2-cb-{{item}}-2" value="">
<label for="chk2-cb-{{item}}-2">B</label>
</div>
<div class="checkbox">
<input type="checkbox" class="ui-checkbox" id="chk2-cb-{{item}}-3" value="">
<label for="chk2-cb-{{item}}-3">C</label>
</div>
<div class="checkbox">
<input type="checkbox" class="ui-checkbox" id="chk2-cb-{{item}}-4" value="">
<label for="chk2-cb-{{item}}-4">D</label>
</div>
<div class="checkbox">
<input type="checkbox" class="ui-checkbox" id="chk2-cb-{{item}}-5" value="">
<label for="chk2-cb-{{item}}-5">E</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
最佳答案
问题是因为您的复选框嵌套在 anchor 内。只需更改:
<a data-toggle="collapse" data-parent="#accordion-{{$index}}"
data-target="#collapseOne-{{$index}}">
收件人:
<div data-toggle="collapse" data-parent="#accordion-{{$index}}"
data-target="#collapseOne-{{$index}}">
查看工作示例:
var app = angular.module('app',[]);
app.controller('mainCTRL',function($scope){
$('.collapse').collapse();
$scope.title="Hello World";
$scope.items1 = ['Group1','Group2','Group3']
}).ui-checkbox {
display: none;
}
.ui-checkbox + label {
position: relative;
padding-left: 25px;
display: inline-block;
font-size: 14px;
}
.ui-checkbox + label:before {
background-color: #fff;
/**#fff*/
border: 1px solid #1279C6;
padding: 9px;
border-radius: 3px;
display: block;
position: absolute;
top: 0;
left: 0;
content: "";
}
.ui-checkbox:checked + label:before {
border: 1px solid #1279C6;
color: #99a1a7;
}
.ui-checkbox:checked + label:after {
content: '\2714';
font-size: 14px;
position: absolute;
top: 1px;
left: 4px;
color: #1279C6;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js">
</script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div ng-app="app" ng-controller="mainCTRL">
<div ng-repeat="item in items1">
<div class="panel-group driving-license-settings" id="accordion-{{$index}}">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<div data-toggle="collapse" data-parent="#accordion-{{$index}}"
data-target="#collapseOne-{{$index}}">
<input type="checkbox" class="ui-checkbox" id="chk1-{{$index}}" value="">
<label for="chk1-{{$index}}">{{item}}</label>
</div>
</h4>
</div>
<div id="collapseOne-{{$index}}" class="panel-collapse collapse ">
<div class="panel-body">
<div class="driving-license-kind">
<div class="checkbox">
<input type="checkbox" class="ui-checkbox" id="chk2-cb-{{item}}-1" value="">
<label for="chk2-cb-{{item}}-1">A</label>
</div>
<div class="checkbox">
<input type="checkbox" class="ui-checkbox" id="chk2-cb-{{item}}-2" value="">
<label for="chk2-cb-{{item}}-2">B</label>
</div>
<div class="checkbox">
<input type="checkbox" class="ui-checkbox" id="chk2-cb-{{item}}-3" value="">
<label for="chk2-cb-{{item}}-3">C</label>
</div>
<div class="checkbox">
<input type="checkbox" class="ui-checkbox" id="chk2-cb-{{item}}-4" value="">
<label for="chk2-cb-{{item}}-4">D</label>
</div>
<div class="checkbox">
<input type="checkbox" class="ui-checkbox" id="chk2-cb-{{item}}-5" value="">
<label for="chk2-cb-{{item}}-5">E</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
关于javascript - 复选框在 Accordion 的 ng-repeat 中被禁用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39022325/
是否可以在PyYAML或Ruby的Psych引擎中禁用创建anchor和引用(并有效地显式列出冗余数据)？也许我在网上搜索时遗漏了一些东西，但在Psych中似乎没有太多可用的选项，而且我也无法确定PyYAML是否允许这样做.基本原理是我必须序列化一些数据并将其以可读的形式传递给一个不是真正的技术同事进行手动验证。有些数据是多余的，但我需要以最明确的方式列出它们以提高可读性(anchor和引用是提高效率的好概念，但不是人类可读性)。Ruby和Python是我选择的工具，但如果有其他一些相当简单的方法来“展开”YAML文档，它可能就可以了。 最佳答案
Devise是一个Ruby库，它为我提供了这个User类:classUser当写入:confirmable时，注册时会发送一封确认邮件。上周我不得不批量创建300个用户，所以我在恢复之前注释掉了:confirmable几分钟。现在我正在为用户批量创建创建一个UI，因此我需要即时添加/删除:confirmable。(我也可以直接修改Devise的源码，但我宁愿不去调和它)问题:如何即时添加/删除:confirmable？ 最佳答案 WayneConrad的解决方案:user=User.newuser.skip_confirmation
我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的
我有以下不起作用的代码:=form_for(resource,:as=>resource_name,:url=>session_path(resource_name),:html=>{:class=>"well"})do|f|=f.label:email=f.email_field:email=f.label:password=f.password_field:password-ifdevise_mapping.rememberable?%p=f.label:remember_me,:class=>"checkbox"=f.check_box:remember_me,:class=>"
我有这个:AccountSummary我想单击该链接，但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案 那是一个javascript链接。Mechan
我想禁用HTTP参数的自动XML解析。但我发现命令仅适用于Rails2.x，它们都不适用于3.0:config.action_controller.param_parsers.deleteMime::XML(application.rb)ActionController::Base.param_parsers.deleteMime::XMLRails3.0中的等价物是什么？ 最佳答案 根据CVE-2013-0156的最新安全公告你可以将它用于Rails3.0。3.1和3.2ActionDispatch::ParamsParser::
我正在尝试以嵌套形式实现HABTM复选框。目前，我有3个模型。主题、类(class)和小组。协会如下:每个科目都有很多课。每节课都属于许多小组。现在，我正在尝试在单个创建和编辑表单上实现它们。这样一节课嵌套在主题中，每节课都有一个组复选框列表来实现HABTM关系。我在实现HABTM关系时遇到了麻烦，因为每个科目都有很多类(class)，而且我不确定如何区分不同的类(class)。为了进一步详细说明，我能够使嵌套表单正常工作，但我无法让HABTM复选框保存到正确的类(class)中。以下代码示例是我的HABTM复选框实现。目前，我已经使用“subject[lessons_attribut
我看到有关未找到文件min.map的错误消息:GETjQuery'sjquery-1.10.2.min.mapistriggeringa404(NotFound)截图这是从哪里来的？ 最佳答案 如果ChromeDevTools报告.map文件的404(可能是jquery-1.10.2.min.map、jquery.min.map或jquery-2.0.3.min.map，但任何事情都可能发生)首先要知道的是，这仅在使用DevTools时才会请求。您的用户不会遇到此404。现在您可以修复此问题或禁用sourcemap功能。修复:获取文
我有一个客户端gem，我将通过rubygems分发业务客户端。Gem客户端有cca。十几个gem依赖项，当它被安装时，由于为每个gem生成rdoc和ri，安装它需要很长时间。客户是商业用户，他们对rdoc/ri没有用处，我正在寻找一种通过.gemspec或Gemfile禁用它的方法。我熟悉利用系统文件.gemrc禁用rdoc/ri的解决方案。但这是NotAcceptable解决方案，因为我希望我的安装像键入一样简单:gem安装foo 最佳答案 你可以使用post-installmessage解释他们可以通过运行@shime建
#!/usr/bin/envrubyrequire'optparse'options={}OptionParser.newdo|opts|opts.on("--languageLANGUAGE",["Ruby","JavaScript"])do|language|options[:language]=languageendend.parse!puts"Language:#{options[:language]}"如果我用./bin/example--languageRu运行它，它将输出:Language:Ruby我想禁用此自动完成/最接近的匹配行为，并在未提供确切名称时引发Option