angularjs - add `$index` into `ng-model`

Question

I have this code:

<ul class="unstyled">
    <li class="card" ng-repeat="user in users">
        <form ng-submit="edit()">
            <input type="text" ng-model="editname"  size="30"placeholder="add name here">
            <input class="btn-primary" type="submit" value="edit">
        </form>
    </li>
</ul>

which card class will be duplicate based on users array. I want to have unique ng-model so that when I edit one of them, it will not affect others. I believe I can use $index. How can I make

ng-model="editname"

into

ng-model="editname + $index"

Or is there a better way to do this?

How about user.name?

show-me-the-code
– show-me-the-code

2015-10-14 02:23:21 +00:00
Commented Oct 14, 2015 at 2:23 — show-me-the-code
– show-me-the-code, Commented Oct 14, 2015 at 2:23

Anik Islam Abhi · Accepted Answer · 2015-10-14 02:24:31Z

1

Try to naming model with ng-repeat instance

Like this

 ng-model="user.editname"

You can check duplicate on $scope.users list by editname property

answered Oct 14, 2015 at 2:24

Anik Islam Abhi

25.4k8 gold badges61 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

sooon Over a year ago

It works! But I have another problem. How can I now pass this edited ng-model to update in the array?

Anik Islam Abhi Over a year ago

pass user to edit like this ng-submit="edit(user)"

Anik Islam Abhi Over a year ago

but already this will be updated with change in model as this model belong to the list

sooon Over a year ago

You are right. It just work magically without another additional code.

Joey Yi Zhao · Accepted Answer · 2015-10-14 02:37:43Z

1

If you really care about the index, you can set the index on the user instance. Then use 'user.index' as the model name. If not, you can use the answer by Anik.

answered Oct 14, 2015 at 2:37

Joey Yi Zhao

43.3k94 gold badges371 silver badges682 bronze badges

Collectives™ on Stack Overflow

angularjs - add `$index` into `ng-model`

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related