无法让单选按钮在带有超赞字体标签的 ng-repeat 中工作
Can't get Radio Buttons to work in ng-repeat with font-awesome labels
我正在努力让一些 Font Awesome 标签与 AngularJS ng-repeat 中的单选按钮一起使用。我知道 ng-repeat 中的 $scope
存在问题,我已经复制了使用 $parent
提到的几个变通方法的示例,但是 none 的修复似乎到目前为止为我工作。
我希望通过单击行仍然可以切换单选按钮。
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;
}
您以某种方式处理单选按钮,就像处理复选框一样。
我在你的fiddle中删除了一些不需要的变量,请检查这是否是你需要的效果?
<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>
我正在努力让一些 Font Awesome 标签与 AngularJS ng-repeat 中的单选按钮一起使用。我知道 ng-repeat 中的 $scope
存在问题,我已经复制了使用 $parent
提到的几个变通方法的示例,但是 none 的修复似乎到目前为止为我工作。
我希望通过单击行仍然可以切换单选按钮。
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;
}
您以某种方式处理单选按钮,就像处理复选框一样。
我在你的fiddle中删除了一些不需要的变量,请检查这是否是你需要的效果?
<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>