AngularJS: Push of an object

Question

In my small application, I am reading a json file, display it and give the user a chance to add records to it. In the particular case, condition is a array in patient and I would like to add one item to the array (depending on the user input). No data needs to be stored or send back via POST.

I am confused whether I need to get the information from the object Patient or from $scope. Nothing gets submitted.

Is the function addCondition correct?

/* Data */
angular.module('prototypeApp')
 .factory('MedicalRecords', function($http) {
   return $http.get('scripts/data/patient_record.json');
});

/* Add more Information to Patients Conditions */
angular.module('prototypeApp')
 .controller('PatientExtConditionCtrl', function ($scope, MedicalRecords) {
        MedicalRecords.success(function(data) {
        $scope.patient = data;
          });
 });

/* Confirm Patients Conditions */
angular.module('prototypeApp')
 .controller('PatientConditionCtrl', function ($scope, MedicalRecords) {
        MedicalRecords.success(function(data) {
        $scope.patient = data;
          });
 });

/* FormController */
angular.module('prototypeApp')
 .controller('AddConditionCtrl', function () {
   this.condition = {};

   this.addCondition = function(patient){
     patient.patientCondition.push(this.condition);
   };
 });


/* in my template */

<form name="AddConditionForm" ng-controller="AddConditionCtrl" ng-submit="AddConditionCtrl.addCondition(patient)">
    <input type="text" class="form-control" ng-model="AddConditionCtrl.condition.hcc">
    <input type="text" class="form-control" id="input_description" ng-model="AddConditionCtrl.condition.description">
    <input type="text" class="form-control" ng-model="AddConditionCtrl.condition.last_report">
    <button type="submit" class="btn btn-primary">Add</button>
</form>

<table class="table table-striped">
    <tr>
        <th>Code</th>
        <th>Condition</th>
        <th>Last Reported</th>
        <th>Check</th>
    </tr>
    <tr ng-repeat="condition in patient.patientCondition">
        <td>{{ condition.hcc }} </td>
        <td>{{ condition.description }}</td>
        <td>{{ condition.last_report | date }}</td>
        <td> Check </td>
        </tr>       
</table>
<form action="/#/patient/conditions/ext">
    <button type="submit" class="btn btn-primary pull-right">Next</button>
</form>

Answer 1

You are nearly there.

Your addCondition is fine. The problem seem to be that you are confusing the classic Angular controller syntax and the newer 'controller as' syntax.

Classic syntax

• the controller function gets the $scope as a parameter and adds members to it
• the controller is attached to the view with ng-controller="controllerName"

• members of $scope are accessible to the view transparently (no prefix)

  .controller('controllerName', function ($scope) {
      $scope.thing = 1
  })
  
  <div ng-controller="controllerName">{{thing}}</div>
  

'Controller As' Syntax

• the controller function does not need the $scope, instead it assigns members to this
• the controller is attached to the view with ng-controller="controllerName as somePrefix"

• members of the controller's this are accessible to the view through somePrefix.fieldName

  .controller('controllerName', function () {
      this.thing = 1
  })
  
  <div ng-controller="controllerName as ctrl">{{ctrl.thing}}</div>
  

You use the classic syntax in your first two controllers but then switch to the 'controller as' syntax, which is OK but you forgot to specify the as prefix part in ng-controller="AddConditionCtrl". Don't forget to update your binding to match the prefix you choose. For example, ng-controller="AddConditionCtrl as addCondition" means you need ng-model="addCondition.condition.hcc".

The Angular team recommends using the 'controller as' syntax because it makes the bindings more explicit since you can immediately see which field comes from which controller.

EDIT: I assume that your form element is a descendant of an element that has either ng-controller="PatientExtConditionCtrl" or ng-controller="PatientConditionCtrl", so that the patient variable is available when the ng-submit executes addCondition(patient).

EDIT: the details about both syntaxes can be found in the official documentation for the ngController directive.