javascript - 无法让单选按钮在带有超赞字体标签的 ng-repeat 中工作

标签 javascript html css angularjs font-awesome

我正在努力让一些 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;
}

最佳答案

您以某种方式处理单选按钮,就像处理复选框一样。

我在你的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>

fiddle

关于javascript - 无法让单选按钮在带有超赞字体标签的 ng-repeat 中工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31057209/

相关文章:

javascript - 如果留空,则从 GCD 计算中删除第三个输入

javascript - Backbone 收集到 morris.js d ="M,0,0"错误

javascript - 在不修改的情况下扩展对象(功能扩展)

html - 100% 高度的图像,带有固定的顶栏和页脚(不固定)

javascript - 在元素类更改时运行 jQuery 回调?

javascript - 在ngrepeat中对行进行分组

html - 如何平均分配 float 的div?

html - 删除垂直 div 之间的空间

html - 使 div 为 TD 的 100% 高度(IE 问题)

html - 从选项卡底部到页脚顶部的竖线布局