Creating an updating list view with dummy content via AngularJS

Question

I'm using AngularJS to build an application that allows users to build reports and then submit them. The title and the time of creation are automatically generated (based on user input), and the report summary is added into a list of all of the reports the user has made.

The table will be eventually populated from a server-side JSON string (and new entries will be added to the server from the local session), but for my local testing, I need a way to add to the table during a local client-side session.

A user will go to a separate page where they can create a report: once they click "Run Report," the report summary should be added to the table, where the name of the report and the date it was created are automatically populated from the user's input. The report-creating interface is on a different page and consequentially a different controller scope from the "main" page where the list of report summaries resides.

Now, here's my question: what is the best, most Angular-tastic way to submit a report summary to the table (a.k.a. a local model) from a different controller $scope?

My code looks like this (keep in mind it is probably dreadful, and I'm planning to refactor it!):

controllers.js:

var MainCtrl = function($scope) {
  $scope.reports = [
    {name:'Trx Summary', date:'Mar 20, 2013 @ 12:30PM'},
    {name:'Trx Summary', date:'Mar 20, 2013 @ 12:30PM'}
  ];
};

_dat_partial_view.html:

<div ng-controller="MainCtrl" class="row-fluid">
  <table class="table table-striped">
    ...
    <tr ng-repeat="report in reports">
      <td>
        <p>{{report.name}} <span class="label label">Generating</span></p>
      </td>
      <td>
        <dl class="no-margin">
          <dt>Date Range</dt>
          <dd>Mar 3, 2013 - Mar 13, 2013</dd>
          <dt>Generated</dt>
          <dd>{{report.date}}</dd>
        </dl>
      </td>
      ...
    </tr>

This successfully creates some dummy content that populates the table with two entries.

What do I need to do to create such a dynamic list-adder? I'm pretty sure I need to push elements into the array, but I have no idea how to do so outside of the current controller $scope. I tried placing the array's code outside of the controller $scope:

controllers.js:

reports = [
        {name:'Trx Summary', date:'Mar 20, 2013 @ 12:30PM'},
        {name:'Trx Summary', date:'Mar 20, 2013 @ 12:30PM'}
      ];

var MainCtrl = function($scope) {};

This simply removed the two dummy entries from the table, so that didn't work.

Any ideas?

Question 2

Another question: What is the best way to create the dynamic list of content that populates the table? The app will create the report, and store it locally. It will then try to push the new report to the server, which will generate the report and theoretically send back a result that concatenates to the JSON string. In other words, the report stays local until it is successfully sent to and generated by the server. The user cannot read the report until it is generated, but the report will also remain saved locally if the server cannot, for some reason, accept the request to generate the new report.

This said, I've seen examples that suggest using a service or factory. Is this the wisest thing to do? Is this better than a simple array like what I've got set up now?

score 1 · Answer 1 · answered Apr 05 '13 at 18:35

You can pass objects into a different scope by using broadcast.

controllerOne

$rootScope.$broadcast('ReportSubmit', $scope.reportObject);

data can be your object from your controller.

Then it listens for the broadcast in the other controller where you can define your data and manipulate it and have access to it..

controllerTwo

$scope.$on('ReportSubmit', function(event, data) {
   $scope.reportObject = data;
};

For the second question, when you create new report, if you have the model bindings on the front-end you can do it like this.

This function you'd bind to ng-click on the create action passing in your object from the form fields.

$scope.createNewReport = function(object) {
// Assign object to var
var newReport = object;

//Add new object to data from in memory object.
$scope.reportList.push(newReport);
};

You can pass it back to the controller or server by using ajax to pass the reportList object

Found a fiddle that may potentially help you out. http://jsfiddle.net/yh3Ds/24/

Believe you'll also have to pass $rootScope into your mainCtrl function to have access. Not sure how your project is structured. — Christopher Marshall, Apr 05 '13 at 18:39

score 1 · Accepted Answer · answered Apr 06 '13 at 01:52

1

You should be using a service here, I think the example you referenced is the correct approach

answered Apr 06 '13 at 01:52

Aaron Saunders

33,180
5
60
80

I watched a video on Angular best practices, and, combined with your advice, you were right. This solved my problem! According to the Angular team, this is what you should do. – Jordan Thornquest Apr 10 '13 at 04:41
glad it worked out for you, BTW a bunch of great videos are available at http://egghead.io – Aaron Saunders Apr 10 '13 at 14:31

Creating an updating list view with dummy content via AngularJS

2 Answers2