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?

Aaron Saunders · Accepted Answer · 2013-04-06 01:52:12Z

1

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

answered Apr 6, 2013 at 1:52

Aaron Saunders

33.4k5 gold badges64 silver badges83 bronze badges

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

2 Comments

Jordan Thornquest Over a year ago

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.

Aaron Saunders Over a year ago

glad it worked out for you, BTW a bunch of great videos are available at egghead.io

Christopher Marshall · Accepted Answer · 2013-04-05 18:35:30Z

1

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/

answered Apr 5, 2013 at 18:35

Christopher Marshall

10.7k10 gold badges57 silver badges95 bronze badges

1 Comment

Christopher Marshall Over a year ago

Believe you'll also have to pass $rootScope into your mainCtrl function to have access. Not sure how your project is structured.

Collectives™ on Stack Overflow

Creating an updating list view with dummy content via AngularJS

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related