Change ng-model inside of ng-repeat loop

Question

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.

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

Here's demo.

Also, $scope.langInput.values appears to be an array, yet you a looping over it as if it were an object or a dictionary. — monty, May 16 '18 at 00:21
then auction_name_account on it is not defined, so you can't call it as if it's an object or an array. you may have to initialise it first. — monty, May 16 '18 at 00:22
Could you please repair it here https://plnkr.co/edit/zaHPNWHhDSLwYZIKvmXh?p=preview fork new plnkr and post it as answer? — BT101, May 16 '18 at 00:24
And do you want its indices/keys to be 0, 1, or specifically 1 and 2. If the latter, are they meant to be the same as the value id's? — monty, May 16 '18 at 00:53
Also, I think I don't understand what you mean by "I want value of ng-model="value" to be UNIQUE" - both the models produced are unique. The key or $index gets evaluated by angularjs to 0 or 1. — monty, May 16 '18 at 01:05

monty · Accepted Answer · 2018-05-17T03:25:32.823

1

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>

edited May 17 '18 at 03:25

answered May 16 '18 at 00:46

monty

1,543
14
30

How is it possible that in my SPA this validations spans below behaviour like it is attached to both while on plunker it's working fine. I mean in my application when I have 1 input correct and 1 incorrect then both span are showing that it is incorrect – BT101 May 16 '18 at 01:54
What do you mean that they are "both showing that it is incorrect"? Do you mean that the values in the model both come up as null until *both* are correct? I'd suggest printing the actual values to screen and seeing what you get, when. – monty May 16 '18 at 02:13
Well so - when I write for example 15 signs in 1st one and 0 signs in 2nd one then both has spans "required" then when i put 15 signs in 1st one and 1sign in 2nd one both shows spans "too short" – BT101 May 16 '18 at 02:31
Then when i write 15 signs in 1st one and 150signs in second one both show spans "too long". I printed value of `{{ inputs }}` and it is updating correctly – BT101 May 16 '18 at 02:32
I've updated my answer (and Plunkr) to include that @BT101 – monty May 17 '18 at 03:26

Change ng-model inside of ng-repeat loop

1 Answers1