javascript - AngularJS:对象的推送

Question

在我的小应用程序中，我正在读取一个 json 文件，显示它并让用户有机会向其中添加记录。在特定情况下，condition 是 patent 中的一个数组，我想向该数组添加一项(取决于用户输入)。无需存储数据或通过 POST 发回数据。

我很困惑是否需要从对象 Patient 或 $scope 获取信息。没有提交任何内容。

函数addCondition正确吗？

/* 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

你就快到了。

您的addCondition很好。问题似乎是您混淆了经典的 Angular Controller 语法和较新的“controller as”语法。

经典语法

• Controller 函数获取$scope作为参数并向其中添加成员
• Controller 通过ng-controller="controllerName"附加到 View

• $scope 的成员可以透明地访问 View (无前缀)

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

“ Controller 为”语法

• Controller 功能不需要 $scope ，而是将成员分配给 this
• Controller 通过ng-controller="controllerName as somePrefix"附加到 View

• 控制者 this 的成员可通过somePrefix.fieldName查看

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

您在前两个 Controller 中使用经典语法，但随后切换到“controller as”语法，这没问题，但您忘记指定 as prefix参与 ng-controller="AddConditionCtrl" 。不要忘记更新您的绑定(bind)以匹配您选择的前缀。例如，ng-controller="AddConditionCtrl as addCondition"意味着你需要ng-model="addCondition.condition.hcc" .

Angular 团队建议使用“controller as”语法，因为它使绑定(bind)更加明确，因为您可以立即看到哪个字段来自哪个 Controller 。

编辑:我假设你的 form element 是具有 ng-controller="PatientExtConditionCtrl" 的元素的后代或ng-controller="PatientConditionCtrl" ，这样patient当 ng-submit 时变量可用。执行addCondition(patient) .

编辑:有关两种语法的详细信息可以在the official documentation for the ngController directive中找到.