Passing id in json through angular js

Question

I want to create a application which show the data of people and once the single person is clicked it has to show the details of the person. I have created id for json file using (index of json) but I don't know how to pass the seperate id to the popup function.

 <div class="content-wrapper" ng-controller="ListController">
 <section class="content">   
   <!-- /.box-header -->

      <div class="box-body table-responsive no-padding">
        <div ng-controller="MainCtrl" class="container">
          <!--controller="MainCtrl"-->
          <table class="table table-hover" ng-model="artists">
            <tr>
              <th>Name</th>
              <th>Profile</th>
              <th>First Name</th>
              <th>Date</th>
              <th>Status</th>
              <th>Reknown</th>
            </tr>


            <tr ng-repeat="item in artists | filter: query | orderBy: artistOrder:direction" id="table-cursor">

              <modal title="{{artists.indexOf(item)}}" visible="showModal">
                <form role="form">
                  <div class="form-group">
                    <label for="text">Name</label>
                    <input type="text" class="form-control" id="email" placeholder="Name" />
                  </div>
                  <div class="form-group">
                    <label for="password">Password</label>
                    <input type="password" class="form-control" id="password" placeholder="Password" />
                  </div>
                  <button type="submit" class="btn btn-default">Send</button>
                </form>
              </modal>

              <td ng-click="toggleModal(artists.indexOf(item))"><span value="{{artists.indexOf(item)}}"></span>{{item.name}}</a>
              </td>
              <td ng-click="toggleModal()"><span value="{{artists.indexOf(item)}}">
                  </span>
                <img ng-src="images/{{item.shortname}}_tn.jpg" width="35" height="35" alt="profile">
              </td>
              <td ng-click="toggleModal()"><span value="{{artists.indexOf(item)}}"></span>
                <h5>{{item.shortname}}</h5>
              </td>
              <td ng-click="toggleModal()"><span value="{{artists.indexOf(item)}}"></span>11-7-2014</td>
              <td ng-click="toggleModal()"><span value="{{artists.indexOf(item)}}"></span><span class="label label-success">Approved</span>
              </td>
              <td ng-click="toggleModal()"><span value="{{artists.indexOf(item)}}"></span>{{item.reknown}}</td>

              <tr>

          </table>
        </div>
        <!--controller="MainCtrl"-->
      </div>
      <!-- /.box-body -->
    </div>
    <!-- /.box -->
  </div>
</div>

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



myApp.controller('ListController', ['$scope', '$http', '$routeParams',
  function($scope, $http, $routeParams) {
    $http.get('angular/data.json').success(function(data) {
     $scope.artists = data;
     $scope.artistOrder = 'name';
    $scope.whichItem = $routeParams.itemId;
   });
  }
 ]);


myApp.controller('MainCtrl', ['$scope', '$http', '$routeParams',
 function($scope, $http, $routeParams) {
  $http.get('angular/data.json').success(function(data) {
  $scope.showModal = false;
  $scope.artists = data;
  $scope.whichItem1 = $routeParams.itemId;
  $scope.toggleModal = function() {
    $scope.showModal = !$scope.showModal;

  };
 });
 }
]);

 myApp.directive('modal', function() {
  return {
   template: '<div class="modal">' +
  '<div class="modal-dialog">' +
  '<div class="modal-content">' +
  '<div class="modal-header">' +
  '<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>' +
  '<h4 class="modal-title">{{ title }}</h4>' +
  '</div>' +
  '<div class="modal-body" ng-transclude></div>' +
  '</div>' +
  '</div>' +
  '</div>',
restrict: 'E',
transclude: true,
replace: true,
scope: true,
link: function postLink(scope, element, attrs) {
  scope.title = attrs.title;

  scope.$watch(attrs.visible, function(value) {
    if (value == true)
      $(element).modal('show');
    else
      $(element).modal('hide');
  });

  $(element).on('shown.bs.modal', function() {
    scope.$apply(function() {
      scope.$parent[attrs.visible] = true;
    });
  });

  $(element).on('hidden.bs.modal', function() {

    scope.$apply(function() {
      scope.$parent[attrs.visible] = false;
    });
  });
}
};
});

Answer 1

you need to recieve your index in the method toggleModal:

  $scope.toggleModal = function($index) {
    // here you need to get the user info and
    //set the result to $scope variable that you can you into the modal
    $scope.userInfo = $scope.artists[$index];
  };

Then you could use the userInfo by editing your HTML like that:

  <div class="form-group">
     <label for="text">Name</label>
     <input type="text" class="form-control" id="email" placeholder="Name" value="{{userInfo.name}}"/>
  </div>

---

Edit:
HTML tag "modal " with attribute "visible= true" gives angular [$rootScope:inprog] error and actually I'm reaching for the reason for this. So I highly recommend you to use the standard bootstrap modal window. Just replace your "modal" html

<modal title="{{artists.indexOf(item)}}" visible="showModal">
   <form role="form">
      ...
   </form>
</modal>

with the following:

<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Chat box</h4>
            </div>
            <div class="modal-body">
                <form role="form">
                    <div class="form-group">
                        <label for="text">"name"</label>
                        <input type="text" class="form-control" id="email" placeholder="Name" ng-value="userInfo.name"/>
                    </div>
                    <div class="form-group">
                        <label for="password">Password</label>
                        <input type="password" class="form-control" id="password" placeholder="Password" value="{{userInfo.password}}"/>
                    </div>
                    <button type="submit" class="btn btn-default">Send</button>
                </form>                                                    </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>

    </div>
</div>

Then you can show it from your controller just like this:

$scope.toggleModal = function($index){
    $("#myModal").modal({show: true});
    $scope.userInfo=$scope.artists[$index];
};

I hope this helps :)


Edit: If you want to open dialog modal without affecting the background, just you need to get rid of the "backdrop". So, After modal initiation

$("#myModal").modal({show: true});

just add the code below

 $('.modal-backdrop').removeClass("modal-backdrop");
 $('#myModal').css('display', 'table')