создание динамических форм с использованием ng-repeat

0

Привет всем, мне нужно создать некоторые динамические формы, чтобы пользователи могли настраивать фиды к их спецификациям.

Я использовал ng-repeat, чтобы сделать следующее:

  1. Для каждого фида создается пользовательская настройка новой вкладки
  2. для каждого свойства в фиде есть метка, и создается текстовое поле ввода. Разметка:

    <tabset>
    <tab ng-repeat="feed in feeds" heading="{{feed.heading}}">
        <form role="form">
            <div class="row" ng-repeat="property in feed.properties">
                <div class="col-xs-6">
                    <div class="input-group">
                        <span class="input-group-addon">
                            <span>{{property.name}}</span>
                        </span>
                        <input type="text" class="form-control" value="{{property.value}}">
                    </div>       
                </div>
            </div>
        </form> 
    </tab></tabset>
    

Это отлично работает с поддержкой json, но мне интересно, какой приемлемый способ захвата данных для такого использования, очевидно, я не буду знать, сколько фидов или свойств у каждого канала есть, поэтому я полагаю, что мне нужно привяжите это к массиву в некотором роде.

Вопрос в том, как?

Теги:
forms
dynamic
model

1 ответ

0
Лучший ответ

использовать ng-model

<input type="text" class="form-control" ng-model="property.value">

Таким образом текстовое поле привязано к property.value. угловой автоматически обновляет property.value при изменении текста в текстовом поле. Вы можете использовать его в своей JS так же, как и любую другую переменную. Что красота угловатая.

  • 0
    к сожалению, эти входные данные генерируются динамически, я думаю, что в этом случае это будет означать, что любое изменение любого поля ввода переопределит значение property.value. Мне нужен экземпляр модели, динамически генерируемый для каждого ввода, который динамически генерируется с помощью ng-repeat.
  • 0
    Нет, не будет. Каждый элемент, созданный с помощью ng-repeat, имеет собственную область видимости и будет обновлять только соответствующее значение. Например, feed2.property3.value. ng-repeat работает почти так же, как вы ожидаете, что «для каждого» на любом языке будет работать. Добавьте <span>{{property.value}}</span> чтобы увидеть его в действии
Показать ещё 4 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню