简体   繁体   中英

how to get object value on button click in angular?

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>

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
}

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

You just need to use

ng-value="item"

and you can get any info you want from there.

Here's a plunker

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM