how to get object value on button click in angular?

Question

I am displaying a list view in angular using ng-repeat .I an able to display list .Actually there is one radio button in each row .And I have one button on screen .I want to get object of selected radio button on button click .In other words If I select first row radio button then if I click button I need get it object how I will achieve this ?

here is my code

<table>

    <tr id="$index"ng-repeat= "a in data " ng-click="getselectedRow(a)">
        <td> {{a.condidateID}} </td>
        <td> {{a.condidateName}} </td>
        <td> {{a.territory}} </td>
        <td> {{a.voteCount}} </td>
        <td>  <input type="radio" name="chickenEgg" value="egg" ng-model="chekratiovalue"></td>

    </tr>
</table>
        <button style="left: 40%;top: 40%;float: left;position: relative" ng-click="voteForPerson()">Vote</button>

Update

 function userdetail($scope,$http,$location,$routeParams){
        console.log(JSON.parse($routeParams.userDetail));
        var userDetail=JSON.parse($routeParams.userDetail);
        $scope.data=userDetail.data;
        console.log($scope.data);
        console.log($scope.data);
        $scope.changeEvnt = function(index) {
            $scope.activeRow = index;
            alert( $scope.activeRow);
        }

        $scope.voteForPerson = function() {
            var selcted = $scope.data[activeRow ];
        }
    }


<table>

    <tr id="$index"ng-repeat= "a in data " ng-click="getselectedRow(a)">
        <td> {{a.condidateID}} </td>
        <td> {{a.condidateName}} </td>
        <td> {{a.territory}} </td>
        <td> {{a.voteCount}} </td>
        <td>  <input type="radio" name="chickenEgg" value="egg" ng-model="chekratiovalue" ng-change="changeEvnt($index)"></td>

    </tr>
</table>
        <button style="left: 40%;top: 40%;float: left;position: relative" ng-click="voteForPerson()">Vote</button>

where to pass ?button is no screen and radio button on each row.only one radio button is selected at one time — user944513
– user944513, Commented Oct 28, 2014 at 5:57

Kalhan · Accepted Answer · 2014-10-28 05:57:50Z

1

add ng-change directive,

<input type="radio" name="chickenEgg" value="egg" ng-model="chekratiovalue" ng-change="chengeEvnt($index)">

In controller

$scope.chengeEvnt = function(index) {
    $scope.activeRow = index;     // get the index when changing the radio button
}

$scope.voteForPerson = function() {
     var selected = $scope.data[$scope.activeRow];   // get the row of selected radio button using the `$scope.activeRow` function
}

answered Oct 28, 2014 at 5:57

Kalhan

21.9k8 gold badges71 silver badges96 bronze badges

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

6 Comments

user944513 Over a year ago

please check that update ..and I will apply your anser

user944513 Over a year ago

sir actually your edited anser also work only first time .Mean when I select first row it give 0 index.then I select second row it give 1 index (deselect the first row).but again when i select first row again it not give alert mean on change event not fire

user944513 Over a year ago

Do you have any idea why it is not firing second time

user944513 Over a year ago

ok I will take static data because I am getting data from local webservice and used plunker

user944513 Over a year ago

Let us continue this discussion in chat.

|

V31 · Accepted Answer · 2014-10-28 06:37:55Z

1

you can use the $parent notation when you click the radio button inside ng-repeat.

 <table>

    <tr id="$index" ng-repeat= "a in data ">
        <td> {{a.condidateID}} </td>
        <td> {{a.condidateName}} </td>
        <td> {{a.territory}} </td>
        <td> {{a.voteCount}} </td>
        <td>  <input type="radio" name="chickenEgg" value="{{a.chekratiovalue}}" ng-model="$parent.chekratiovalue"></td>

    </tr>
</table>

This is required as ng-repeat creates its own scope.

Working Example

answered Oct 28, 2014 at 6:37

V31

7,6643 gold badges28 silver badges44 bronze badges

1 Comment

V31 Over a year ago

@user944513: Did this help u?

Dylan · Accepted Answer · 2014-10-28 06:48:22Z

0

You just need to use

ng-value="item"

and you can get any info you want from there.

Here's a plunker

answered Oct 28, 2014 at 6:48

Dylan

4,7831 gold badge22 silver badges27 bronze badges

Collectives™ on Stack Overflow

how to get object value on button click in angular?

3 Answers 3

6 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related