AngularJS:推送对象

AngularJS: Push of an object

本文关键字：对象 AngularJS      更新时间：2023-09-26

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

我很困惑我是否需要从对象Patient或从$scope中获取信息。

function 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>

你就快成功了。

你的addCondition很好。问题似乎是你混淆了经典的Angular控制器语法和较新的'controller as'语法。

经典语法

  • 控制器函数获取$scope作为参数并向其添加成员
  • 控制器通过ng-controller="controllerName"
    • 附加到视图

  • $scope的成员可以透明地访问视图(没有前缀)

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

'Controller As'语法

  • 控制器函数不需要$scope，而是将成员分配给this
  • 控制器通过ng-controller="controllerName as somePrefix"
    • 附加到视图

  • 控制器this的成员可以通过somePrefix.fieldName访问视图

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

您在前两个控制器中使用经典语法，但随后切换到"controller as"语法，这是可以的，但您忘记在ng-controller="AddConditionCtrl"中指定as prefix部分。不要忘记更新绑定以匹配您选择的前缀。例如，ng-controller="AddConditionCtrl as addCondition"意味着您需要ng-model="addCondition.condition.hcc"。

Angular团队推荐使用"controller as"语法，因为它使绑定更显式，因为你可以立即看到哪个字段来自哪个控制器。

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

编辑:这两种语法的详细信息可以在ngController指令的官方文档中找到。

相关文章：