Question

在我的小应用程序中，我正在读取一个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>

Answer 1

你快到了。

您的addCondition没问题。问题似乎是您将经典的Angular控制器语法和较新的控制器混淆为＆＃39;语法。

经典语法

控制器功能将$scope作为参数并向其添加成员
控制器已使用ng-controller="controllerName"

$scope的成员可以透明地访问视图（无前缀）

.controller('controllerName', function ($scope) {
    $scope.thing = 1
})

<div ng-controller="controllerName">{{thing}}</div>

＆＃39; Controller As＆＃39;语法

控制器功能不需要$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>

您在前两个控制器中使用经典语法，然后切换到＆＃39;控制器作为＆＃39;语法，这没关系，但您忘记在as prefix中指定ng-controller="AddConditionCtrl"部分。不要忘记更新绑定以匹配您选择的前缀。例如，ng-controller="AddConditionCtrl as addCondition"表示您需要ng-model="addCondition.condition.hcc"。

Angular团队建议使用＆＃39;控制器作为＆＃39;语法，因为它可以使绑定更加明确，因为您可以立即看到哪个字段来自哪个控制器。

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

编辑：有关这两种语法的详细信息，请参阅the official documentation for the ngController directive。

AngularJS：推送一个物体

1 个答案: