Изменить ng-модель внутри цикла ng-repeat - PullRequest
Новая
       42

Изменить ng-модель внутри цикла ng-repeat

0 голосов
/ 16 мая 2018

Я пытаюсь привязать ng-модель к вводу на основе $ index ng-repeat или ключа объекта, на котором я зацикливаюсь.

Я пробовал вот так 

<div data-ng-repeat="(key, n) in langInput.values">
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 u-no-padding">
        <label class="sell__label" for="auction_name_account_{{n.selected }}">Główna nazwa Twojej aukcji ({{n.selected }}):</label>
        <div class="pst-relative">
            <input type="text"
                   id="auction_name_account_{{n.selected }}"
                   class="form-control"
                   name="auction_name_account"
                   data-ng-model="inputs.auction_name_account[$index]"
                   data-ng-minlength="10"
                   data-ng-maxlength="60"
                   required />
            <span class="sell__input-text sell__input-text--big-input" data-ng-show="sellItem.auction_name_account.$error.required">Wymagane!</span>
            <span class="sell__input-text sell__input-text--big-input" data-ng-show="sellItem.auction_name_account.$error.minlength">Za krótkie!</span>
            <span class="sell__input-text sell__input-text--big-input" data-ng-show="sellItem.auction_name_account.$error.maxlength">Za długie!</span>
        </div>
    </div>
</div>

и вот так 

<div data-ng-repeat="(key, n) in langInput.values">
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 u-no-padding">
        <label class="sell__label" for="auction_name_account_{{n.selected }}">Główna nazwa Twojej aukcji ({{n.selected }}):</label>
        <div class="pst-relative">
            <input type="text"
                   id="auction_name_account_{{n.selected }}"
                   class="form-control"
                   name="auction_name_account"
                   data-ng-model="inputs.auction_name_account[key]"
                   data-ng-minlength="10"
                   data-ng-maxlength="60"
                   required />
            <span class="sell__input-text sell__input-text--big-input" data-ng-show="sellItem.auction_name_account.$error.required">Wymagane!</span>
            <span class="sell__input-text sell__input-text--big-input" data-ng-show="sellItem.auction_name_account.$error.minlength">Za krótkie!</span>
            <span class="sell__input-text sell__input-text--big-input" data-ng-show="sellItem.auction_name_account.$error.maxlength">Za długie!</span>
        </div>
    </div>
</div>

Объект, на котором я зациклен: 

$scope.langInput = {
    values: [
        {
            id: "1",
            selected: "pl"
        },
        {
            id: "2",
            selected: "eng"
        }
    ],

Результатом этого является то, что моя модель ng inputs.auction_name_account[$index] или inputs.auction_name_account[key] не так, как я хочу.

img1 img2

Я хочу, чтобы значение ng-model="value" было УНИКАЛЬНЫМ.

Вот демо .

1 Ответ

0 голосов
/ 16 мая 2018

Убедитесь, что вы инициализируете массив в своих входах (если вы хотите, чтобы он был простым массивом, иначе он будет объектом по умолчанию): 

$scope.inputs = {
    auction_name_account: [];
};

См. Plunk: https://plnkr.co/edit/EkMZ6nJszuKt40K1FKOA?p=preview

(также обратите внимание, что, поскольку у вас есть минимальная длина на входе, она не будет отображаться в модели, пока не пройдет 10 символов, иначе она будет отображаться как ноль)

И чтобы ваши диапазоны ошибок работали правильно (отвечая на вопрос в комментариях ниже), вам нужно исправить имя на входе, чтобы включить индекс: 

name="auction_name_account_{{value.selected}}"

И затем использовать это имя в ваших диапазонах (при условии, что ваша форма называется "sellItem"): 

<span class="error sell__input-text sell__input-text--big-input" data-ng-show="sellItem.auction_name_account_{{value.selected }}.$error.required">Wymagane!</span>
...