How to get Button label in AngularJS?

Question

I have following lines of code in my AngularJS project.

<div ng-show="update">
<table border="1">
    <tr ng-repeat="x in names">
        <td>{{ x.uname}}</td>
        <td>{{ x.upass}}</td>
        <td><button ng-model="index" ng-click="show()" 
                     ng-value="{{x.index}}">Edit</button></td>
    </tr>
</table>

When Particular button is clicked I want to retrieve that button label. For that I have written code in Show function:

var v = $scope.index;
alert(v);

But alert box is displaying "Undefined" when i click on button. Please suggest me where I am wrong?? Thanks in advance

Well... There really isn't any reason to bind the button with the ngModel directive. What are you trying to achieve exactly? — casraf
– casraf, Commented Aug 11, 2015 at 11:23
I mean I want to pass index to function from button when button is clicked — Ankit21ks
– Ankit21ks, Commented Aug 11, 2015 at 11:38

Ankit21ks · Accepted Answer · 2015-08-11 11:46:49Z

1

What about providing your value as an argument to the onclick function ?

<div ng-show="update">
<table border="1">
    <tr ng-repeat="x in names">
        <td>{{ x.uname}}</td>
        <td>{{ x.upass}}</td>
        <td><button ng-click="show(x.index)">Edit</button></td>
    </tr>
</table>

and then

function show(id){

    alert(id);
}

This should works. Also ng-model does not work on button.

edited Aug 11, 2015 at 11:46

Ankit21ks

4851 gold badge7 silver badges22 bronze badges

answered Aug 11, 2015 at 11:23

sebastienbarbier

6,8624 gold badges34 silver badges57 bronze badges

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

2 Comments

Grundy Over a year ago

why you not use id param inside function?

sebastienbarbier Over a year ago

Sorry my mistake, I did it a bit quickly. it is fixed :D. Thx @Ankit21ks for suggesting the edit.

mani R · Accepted Answer · 2015-08-11 11:25:05Z

1

under ng-click = show(item) - this gives the particular item object.

    function show(obj){ console.log(obj)}

this function give the particular clicked obj from view.

ng-model doesn't work on button.

answered Aug 11, 2015 at 11:25

mani R

3614 silver badges16 bronze badges

Comments

Brocco · Accepted Answer · 2015-08-11 12:00:51Z

0

You can pass the index of the repeat iteration to the show method like this:

<button ng-click="show($index)" ...

and use it like this:

function show(i){
  var v = names[i];
  alert(v);
}

You can see it in action here: PLNKR DEMO

NOTE: if you are passing the index to the backend service the index may not match up with the actual array if you are using a filter in your view to alter/reduce the ng-repeat expression

Another option as pointed out by @Grundy is to just pass the object back, which saves you the step of having to access it from the array... (note: this is the suggested best practice)

edited Aug 11, 2015 at 12:00

answered Aug 11, 2015 at 11:26

Brocco

65.4k12 gold badges74 silver badges77 bronze badges

2 Comments

Grundy Over a year ago

if you pass x directly, you not need names[i]

Brocco Over a year ago

@Grundy you are correct, I had it in my plnkr, but didn't save the right URL.... but I updated my answer to show the passing of an object.

Shashi · Accepted Answer · 2015-08-11 12:22:06Z

0

I am assuming that you want the button label that you have clicked on and the index of it in the list provided. Here is what you can do.

<div ng-repeat="buttonId in testdata2">
  <button ng-bind="buttonId" ng-click="clickedMe(buttonId, $index)"></button>
</div>




$scope.clickedMe = function(buttonId, index) {
 console.log(buttonId + " - " + index);
};

Have your files in local and run them.

answered Aug 11, 2015 at 12:22

Shashi

115 bronze badges

Collectives™ on Stack Overflow

How to get Button label in AngularJS?

4 Answers 4

2 Comments

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related