How to get json data and construct a modal using Angular JS

Question

When I click on the view details button, I want to request JSON data and then construct a modal view over the content.

HTML:

<a href="#">View Details 1</a>
<a href="#">View Details 2</a>
<a href="#">View Details 3</a>

Get JSON:

function MyCtrl($scope){
      $http.get('json/story.json').success(function(data){
        console.log(data);
        $scope.story = data;
    });
}

What is the best practices to run this MyCtrl function using angular.js when a user clicks on the detail button? Also the HTML above is being printed out using another controller. I hope there is some way to bind the clicks versus hard-coding ID's and such in the links.

hi Brandon, just a thought. why dont you use $.getJSON instead of $.get. — ismail baig
– ismail baig, Commented Mar 27, 2013 at 2:39
Hi ismail baig, I love using jquery however I am building a project using angular so I can take advantage of its MVC and template feature. — Brandon Tran
– Brandon Tran, Commented Mar 27, 2013 at 4:54
Hi Brandon,thanks. i actually got bit confused. Anyhow we use JSRender to achieve something similar. — ismail baig
– ismail baig, Commented Mar 27, 2013 at 7:58

jszobody · Accepted Answer · 2013-03-27 02:53:23Z

4

You can call methods in your controller like this:

<a href="#" ng-click="getDetails()">View Details</a>

And then in the controller:

$scope.getDetails = function() {
    $http.get(...).success(function(data){
        $scope.story = data;
    });
}

answered Mar 27, 2013 at 2:53

jszobody

29k6 gold badges66 silver badges76 bronze badges

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

1 Comment

Brandon Tran Over a year ago

I like this simple technique. Thanks. Services could be another option, however this one is exactly what I needed for a simple solution.

pkozlowski.opensource · Accepted Answer · 2013-03-27 06:51:15Z

1

A complete example of CRUD edit with asynchronous data (here simulated via $timeout) can be seen here: http://plnkr.co/edit/EAabx4?p=preview

It uses the $dialog service from the http://angular-ui.github.com/bootstrap/ repository. This example uses Bootstrap's CSS but a template is fully customizable.

The nice part about the $dialog service is that it nativelly works with AngularJS promises so you don't have to copy things to a scope, use watches etc.

answered Mar 27, 2013 at 6:51

pkozlowski.opensource

117k60 gold badges329 silver badges286 bronze badges

Comments

Mark Rajcok · Accepted Answer · 2013-03-27 14:38:14Z

Put your server communication code (i.e., $http stuff) into an Angular service. Inject that service into the controller that displays your HTML and into your controller that is associated with your modal view (if you have one).

Have your links invoke functions on the controller that will interact with the service to fetch the data. Have your modal controller $watch for the data.

<div ng-controller="MyCtrl">
<a href="" ng-click="getDataset1()">View Details 1</a>

Controllers:

function MyCtrl($scope, myService) {
   $scope.getDataset1 = function() {
       myService.getDataset1();  // populates myService.modalData
   };
}

function ModalCtrl($scope, myService) {
   $scope.showModal = false;
   $scope.$watch(myService.modalData, function(data) {
      $scope.modalData = data;
      $scope.showModal = true;
   });
}

Collectives™ on Stack Overflow

How to get json data and construct a modal using Angular JS

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related