javascriptangularjsangular-ngmodelng-bind

Change ng-model inside of ng-repeat loop


I'm trying to bind ng-model to input basing on $index of ng-repeat or key of object which I'm looping on.

I tried like this

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

and like this

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

Object that I'm looping on is:

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

Result of this is that my ng-model is inputs.auction_name_account[$index] or inputs.auction_name_account[key] not like I want.

img1 img2

I want value of ng-model="value" to be UNIQUE.


Here's demo.


Solution

  • Make sure you initialise the array in your inputs (if you want it to be a simple array, else it will be an object by default):

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

    See plunk: https://plnkr.co/edit/EkMZ6nJszuKt40K1FKOA?p=preview

    (also note that because you have a min length on the input, it won't show up in the model until it has passed 10 characters, else it will show up as null)

    And to get your error spans working correctly (answering question in below comments), you will need to fix the name on your input to include the index:

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

    And then use that name in your spans (assuming your form is called "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>