Выровняйте переключатели по вертикали в Angular JS

Question

Выровняйте переключатели по вертикали в Angular JS

0

Я создаю форму типа радио вопросов.

Вот код для просмотра:

                <div  class="form-group" ng-class="{ 'has-error': form.$submitted && form[field.id].$invalid }" ng-if="field.type === 'radio'">
                    <label for="{{field.id}}">{{field.title}}</label>
                    <br>
                    <label 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>
                    <p class="form-group-note" ng-if="field.info" ng-bind="field.info"></p>

                    <div ng-show="form.$submitted" ng-cloack>
                        <span class="help-block" ng-show="form['{{field.id}}'].$error.required" ng-if="field.validations.required">Please enter a value, this field is required</span>
                    </div>

                    Selected Value is : {{formData[field.id]}}
                </div>

Данные 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"
                                }
                            ]
                        }
                    ]

Результат, который я получаю для радио-вопросов, выглядит следующим образом: Как вы можете видеть, все переключатели выровнены по горизонтали. Как выровнять их по вертикали? Я имею в виду один переключатель в одной строке.

Kahsn 22 апр. 2016, в 04:30

Источник

1

Просто добавьте style="display:block;" на этикетке.
Archie Reyes 22 апр. 2016, в 02:44
0

Уничтожает радио форму в странном формате.
Kahsn 22 апр. 2016, в 02:55
0

пожалуйста, проверьте, если это то, что вы хотите. JSFiddle
Archie Reyes 22 апр. 2016, в 02:58
0

О нет. Я так виноват. Я поставил стиль не в том месте: / Это было то, что я искал, спасибо!
Kahsn 22 апр. 2016, в 03:12

Показать ещё 2 комментария

Теги:

javascript

html

angularjs

css

3 ответа

Ещё вопросы

Просто добавьте style="display:block;" на этикетке.
Уничтожает радио форму в странном формате.
пожалуйста, проверьте, если это то, что вы хотите. JSFiddle
О нет. Я так виноват. Я поставил стиль не в том месте: / Это было то, что я искал, спасибо!

byteC0de · Answer 1 · 2016-04-22T02-39-00.000Z

Добавьте стиль в свой 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>

Nikhil Maheshwari · Answer 2 · 2016-04-22T02-04-00.000Z

Оберните свои входы в 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/

Alex Kudryashev · Answer 3 · 2016-04-22T01-38-00.000Z

Смотрите, что вы хотите повторить.

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