代码之家 › 专栏 › 技术社区 › BT101

更改ng重复循环内的ng模型

ng-bind angular-ngmodel angularjs javascript

BT101 · 技术社区 · 8 年前

我正试图根据ng repeat的$索引或循环对象的键将ng模型绑定到输入。

我试过这样

<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] 不是我想要的。

我想要的价值 ng-model="value" 独一无二。

这是 demo .

1 回复 | 直到 8 年前

monty 8 年前

确保在输入中初始化数组(如果希望它是一个简单数组,否则默认情况下它将是一个对象):

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

参见plunk: 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>