Display radio button data from array value in scope angular

Question

I have web service call. I am getting response from webservice like this :

var SSOUserResponse = [
                  {
                      "UserName": "se",
                      "FirstAndLastName": "Sam ",
                      "EmailAddress": "segfgf@x.net"
                  },
                  {
                      "UserName": "se2",
                      "FirstAndLastName": "Joe ", //
                      "EmailAddress": "se266@gmail.com" //
                  }
                ];

or

SSOUserResponse array length can me more also.

$scope.launchArray = [];

I want to display this data in my templete.

What I am doing :

if (SSOUserResponse.length > 1) {
                    var launchArrayVal = [];
                    for (var i = 0; i < SSOUserResponse.length;i++){
                        launchArrayVal.push(
                          { name: SSOUserResponse[i].UserName, email: SSOUserResponse[i].EmailAddress }
                        );
                        $scope.launchArray = launchArrayVal;
                    }
}

I have a templete :

<div class="modal-body">
                <div>Please select an one data</div>
                <div>
                    <input type="radio" ng-model="launchArray" name="group1" value="{{launchArray.name}}">
                </div>
            </div>

I want to display radio button with with username and email to display.. I tried ng-repeat also. It is not working.

Can u guide me what I doing wrong or what I can do?

Answer 1

You want to show one radio button per result, right?

This is when you would use ng-repeat. You didn't mention what the problem was when you used ng-repeat.

Currently, in your template, you're doing {{launchArray.name}} which won't work, since launchArray is an array... it doesn't have a name property.

Using ng-repeat, you loop over each item in launchArray and render a radio button each time:

<div class="modal-body">
                <div>Please select an one data</div>
                <div ng-repeat="item in launchArray">
                    <input type="radio" name="group1" value="{{item.name}}">
                    <span>{{item.name}} ({{item.email}})</span>
                </div>
            </div>

Answer 2

Checkout this

<div class="modal-body">
        <div>Please select an one data</div>
        <div ng-repeat = 'item in launchArray'>
            <input type="radio" ng-model="selected.value" name="group" ng-value="item.name">
            <div> Name : {{item.name}}</div>
            <div> Email : {{item.email}}</div>
        </div>
    </div>
    <br>
    <br>
    <br>
    <br>
    <div >
      <b>Selected Value :: </b>{{selected.value}}
    </div>



  var SSOUserResponse = [
                  {
                      "UserName": "se",
                      "FirstAndLastName": "Sam ",
                      "EmailAddress": "segfgf@x.net"
                  },
                  {
                      "UserName": "se2",
                      "FirstAndLastName": "Joe ", //
                      "EmailAddress": "se266@gmail.com" //
                  }
                ];

  if (SSOUserResponse.length > 1) {
      var launchArrayVal = [];
      for (var i = 0; i < SSOUserResponse.length;i++){
          launchArrayVal.push(
            { name: SSOUserResponse[i].UserName, email: SSOUserResponse[i].EmailAddress }
          );
      }

    $scope.launchArray = launchArrayVal;
    $scope.selected = {value: null};
  }