在 ng-repeat 循环中更改 ng-model

Question

我正在尝试根据 ng-repeat 的 $index 或我正在循环的对象的键将 ng-model 绑定到输入。

我这样试过

<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-model inputs.auction_name_account[$index] 或 inputs.auction_name_account[key] 与我想要的不一样。

我希望 ng-model="value" 的值是唯一的。

这里是demo。

Answer 1

确保在输入中初始化数组（如果您希望它是一个简单的数组，否则默认情况下它将是一个对象）：

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

请参阅插件：https://plnkr.co/edit/EkMZ6nJszuKt40K1FKOA?p=preview

（另请注意，因为您的输入有最小长度，它不会显示在模型中，直到超过 10 个字符，否则它将显示为 null）

为了让您的错误跨度正常工作（在下面的评论中回答问题），您需要修复输入中的名称以包含索引：

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

然后在您的 span 中使用该名称（假设您的表单名为 "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>

在 ng-repeat 循环中更改 ng-model

Change ng-model inside of ng-repeat loop

javascript

angularjs

angular-ngmodel

ng-bind