Javascript 以角度垂直对齐单选按钮

我正在建立一种无线电问题类型

以下是查看代码：

{{field.title}


{{value.title}}

请输入一个值，此字段为必填字段
所选值为：{{formData[field.id]}

我输入的JSON数据是

{
    "groups": [
        {
            "id": "4_2",
            "title": "Passport",
            "sections": [
                {
                    "id": "4_2_section",
                    "fields": [
                        {
                            "id": "select_id",
                                                        "title": "Select type of question",
                            "type": "select",
                            "info": "Always select \"Yes\"",
                            "size": {
                                "width": 100,
                                "height": 1
                            },
                            "validations": {
                                "required": true
                            },
                            "values": [
                                {
                                    "id": 0,
                                    "title": "Not Selected"
                                },
                                {
                                    "id": 1,
                                    "title": "Yes"
                                },
                                {
                                    "id": 2,
                                    "title": "No"
                                }
                            ]
                        }
                    ]

我对电台提问的结果如下： 如您所见，所有单选按钮都是水平对齐的。

---

如何将它们垂直对齐？？我的意思是一行上有一个单选按钮。

在HTML中添加样式

.display-block {
 display: block;
}

<label class="display-block" ng-repeat="value in field.values">
    <input type="radio" id="{{field.id}}" name="field.id" ng-model="formData[field.id]" value="{{value.title}}"> {{value.title}}
</label>

。显示块{
显示：块；
}
{{value.title}}

注意你想重复的内容

<ul>
<li ng-repeat="value in field.values">
   <label for="{{field.id}}"> {{value.title}}</label>
   <input type="radio" id="{{field.id}}" name="field.id" ng-model="formData[field.id]" value="{{value.title}}">
</li>
</ul>

{{value.title}}

用ul、li包装您的输入。下面的代码肯定会有帮助：

HTML:

---

jsIDLE:

只需在标签上添加

style=“display:block；”“

。它会以奇怪的格式破坏无线电表单。请检查这是否是您想要的。哦，不，我很抱歉。我把款式放错地方了：/那正是我想要的。谢谢！

<form name="myForm" ng-controller="MyCtrl">
    <p>Favorite Beatle</p>
    <ul>
        <li ng-repeat="person in people">
            <label>{{person.name}}
                <input type="radio" ng-model="$parent.name" name="name" value="{{person.name}}" required />
            </label>
        </li>
    </ul>
    <p><tt>myForm.$invalid: {{myForm.$invalid}}</tt></p>
    <button ng-disabled="myForm.$invalid">Submit</button>
</form>

function MyCtrl($scope) {
    $scope.people = [{
        name: "John"
    }, {
        name: "Paul"
    }, {
        name: "George"
    }, {
        name: "Ringo"
    }];
}