Angular JS binding scope data within ng-repeat to form

Question

I have a collection of items in $scope.data with fields "id","name" & "age", that are being displayed in the view using ng-repeat directive. For each set of items, there is a corresponding "edit button".

I want to be able to access values for the particular set of items for which edit button was pressed.

Html:

<div ng-controller="Ctrl">
    <div ng-repeat="i in data">
        Name: {{i.name}}
        Age: {{i.age}}

        <form ng-submit="submit()">
            <input type="text" ng-model="i.id"/>
            <input type="submit" value="Edit" />
        </form>
    </div>
</div>

Script:

function Ctrl($scope) 
{
  $scope.data = [
    {id:1,name:"Alex",age:22},
    {id:2,name:"Sam", age:28}
    ];

    $scope.submit = function() {
        //access id of user for which edit was clicked
    };
}

What is the right way to do this?

Davin Tryon · Accepted Answer · 2013-11-09 21:27:42Z

6

Instead of a form, I would suggest you just use a button:

<div ng-controller="Ctrl">
    <div ng-repeat="i in data">
        Name: {{i.name}}
        Age: {{i.age}}

        <input type="text" ng-model="i.id"/>
        <button ng-click="submit(i)">Edit</button>

    </div>
</div>

Just send i into the button click event (I suppose you could use form if you need validation, but your example doesn't seem to need it).

Your submit function then changes to:

$scope.submit = function(selectedItem) {

    // here you now have access to selected item    
};

answered Nov 9, 2013 at 21:27

Davin Tryon

67.4k15 gold badges149 silver badges139 bronze badges

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

1 Comment

robru Over a year ago

This solution worked for me while the accepted solution did not.

lukpaw · Accepted Answer · 2017-06-18 18:53:07Z

3

Try this:

HTML:

<form ng-submit="submit(i.id)">

JavaScript:

$scope.submit = function(userId) {
  // you have userId
};

edited Jun 18, 2017 at 18:53

answered Nov 9, 2013 at 21:26

lukpaw

1,6132 gold badges26 silver badges31 bronze badges

3 Comments

Phil Sandler Over a year ago

Yep, or submit(i) if you want to pass the whole item (not just the id).

Thomas Ibbotson Over a year ago

I'm very confused by this answer, what is addBrandModelFilter? Why is it not $scope.submit = function(useId) {};?

lukpaw Over a year ago

@Thomas you're right. I've corrected this. The error came from the fact that I wrote it quickly and copied the source code from my project.

KayakDave · Accepted Answer · 2013-11-09 21:28:02Z

2

One option is to just use an ng-click within a button that calls your submit passing in i

<div ng-controller="Ctrl">
    <div ng-repeat="i in data">
        Name: {{i.name}}
        Age: {{i.age}}

        <button ng-click="submit(i);">edit</button>

    </div>
</div>

and the function:

$scope.submit = function(i) {
    console.log(i);
    //access id of user for which edit was clicked
};

Here's a fiddle of that working: http://jsfiddle.net/pRAcP/

answered Nov 9, 2013 at 21:28

KayakDave

24.7k3 gold badges68 silver badges68 bronze badges

Collectives™ on Stack Overflow

Angular JS binding scope data within ng-repeat to form

3 Answers 3

1 Comment

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related