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;
    });
  });
}
};
});

html tag "modal " with attribute "visible= true" gives angular [$rootScope:inprog] error and actually I'm reaching for the reason for this. So I recommend you to follow my edited answer I'm going to post. — Mouneer
– Mouneer, Commented Jul 10, 2015 at 14:35

Mouneer · Accepted Answer · 2015-07-13 08:23:26Z

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')

edited Jul 13, 2015 at 8:23

answered Jul 9, 2015 at 11:47

Mouneer

13.5k3 gold badges37 silver badges46 bronze badges

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

4 Comments

Sen Over a year ago

Thank you !, I'm new to angular, I tried your suggestion but the modal window is not working. can you provide your email id are some thing so that i can send you my full code. or can you fix that, I want just a pop up. Any person I click his name or id should be selected or has to displayed.

Sen Over a year ago

yes the modal window was working good. your code giving answers but the window is not working. I don't know where the error is, I will send you the code

Sen Over a year ago

I have send the files.

Sen Over a year ago

Actually I dont want modal pop up, it's chat box so it should not hide the background, when i click the person it should popup like facebook or gmail chat in seperate window.

Collectives™ on Stack Overflow

Passing id in json through angular js

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related