角度の付いたJSのラジオボタンを垂直に合わせます

Question

私はラジオの質問タイプのフォームを作成しています。ここで

は、ビューのコードです：あなたが見ることができるように ：私は摂食てる

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" 
           } 
          ] 
         } 
        ] 

ですすべてのラジオボタンが水平に整列されます。 どのように縦に並べるのですか？私は1列に1つのラジオボタンを意味する。

Answer 1

は

.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> 

Answer 2

を繰り返したいものを見るあなたのHTMLにスタイルを追加します。

<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> 

Answer 3

入力をul、liで囲みます。コードの下には確かに役立ちます。

HTML：

<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> 

はJavaScript：

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

JsFiddle：; `ラベル上：https://jsfiddle.net/nikdtu/zp2131zw/