Get all values when button is pressed

Question

Here is the scenario, I have few list items which are repeat via ng-repeat. When we click on the submit button, I need to get all the information of the selected radio button (id, name and description). I know we can achieve this using ng-change on radio buttons, but it does not fulfill my requirement. I need to get it when the submit button is clicked.

Here is the link to plunker:

http://plnkr.co/edit/YKtWm8kaLOIUfc09ZSCA?p=preview

 <form ng-submit="showData()">
      <ul>
        <li ng-repeat="list in lists">
          <input type="radio" name="radiogroup" ng-model="radioMod.value" value="{{list.id}}">
              {{list.name}}
              <br />
          <p>{{list.description}}</p>
        </li>
      </ul>
      <button type="submit">submit</button>
    </form>

I have added nothing to the controller...

var myApp = angular.module('myApp', []);

myApp.controller('MainCtrl', function($scope) {

  $scope.lists = [
    {"id": 1, 'name' : 'radio1', 'description' : 'some text for radio1'},
    {"id": 2, 'name' : 'radio2', 'description' : 'some text for radio2'},
    {"id": 3, 'name' : 'radio3', 'description' : 'some text for radio3'}

  ];
});

Thanx.

Answer 1

Here is an updated Plunker:

http://plnkr.co/edit/OnHXect37Phij9VAB0ET

You need to set the value to the whole "list" object with ng-value, no need for an additional flag.

Answer 2

You can put an listActive variable in your scope and bind it to the option:

<input type="radio" ng-model="$parent.listActive" value="{{list}}">

Here is a sample