[英]Can't get Radio Buttons to work in ng-repeat with font-awesome labels
我正在努力让一些Font Awesome标签与AngularJS ng-repeat中的单选按钮一起使用。 我知道ng-repeat中的$scope
存在问题,并且我已经复制了使用$parent
提到的几种变通方法的示例,但是到目前为止,这些修复程序似乎都对我没有用。 我希望单击行仍可以切换单选按钮。
JSFIDDLE: http : //jsfiddle.net/U3pVM/16692/
的HTML
<div ng-app>
<div ng-controller="TodoCtrl">
<div class="container-fluid">
<div class="row" ng-repeat="i in integrations" ng-click="$parent.isChecked = !$parent.isChecked">
<div class="col-xs-1">
<input id="int{{$index}}" type="radio" ng-model="$parent.isChecked" name="radiointegration" ng-value="i.isChecked" />
<label for="int{{$index}}"></label>
</div>
<div class="col-xs-6" style="padding-top:10px">{{i.text}}</div>
<div class="col-xs-5" style="padding-top:10px">{{i.isChecked}}</div>
</div>
</div>
</div>
</div>
JS
function TodoCtrl($scope) {
$scope.integrations = [{
text: 'one',
isChecked: false
}, {
text: 'one',
isChecked: false
}, {
text: 'one',
isChecked: false
}, {
text: 'one',
isChecked: false
}, {
text: 'one',
isChecked: false
}];
}
的CSS
.row:nth-of-type(even) {
background: #f3f8fe;
}
input[type=radio] {
display: none;
}
/* to hide the radio itself */
input[type=radio] + label:before {
font-family: FontAwesome;
display: inline-block;
}
input[type=radio] + label:before {
content: "\f1db";
}
/* unchecked icon */
input[type=radio] + label:before {
letter-spacing: 10px;
}
/* space between radio and label */
input[type=radio]:checked + label:before {
content: "\f00c";
color: $harmonyColorGood
}
/* checked icon */
input[type=radio]:checked + label:before {
letter-spacing: 5px;
}
/* allow space for check mark */
label {
margin-top: 7px;
margin-left: 10px;
font-size: 25px;
}
label:hover,
.row:hover {
cursor: pointer;
background: #f5f5f5;
}
您以某种方式处理了复选框之类的单选按钮。
我在您的小提琴中删除了一些不必要的变量,请检查这是否是您需要的效果?
<div class="row" ng-repeat="i in integrations">
<div class="col-xs-1">
<input id="int{{$index}}" type="radio" ng-model="$parent.checked" name="radiointegration" ng-value="i.text" />
<label for="int{{$index}}"></label>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.