为什么我不能在使用ng-model时设置输入值?

时间:2018-03-30 20:06:26

标签: javascript html angularjs angularjs-scope

我正在尝试填充表单中的某些默认字段。据我所知,AngularJS方法是使用控制器来设置这些值。我正在使用组件 - 我开始后悔,因为大多数在线示例都不使用此布局。

component.js

angular.
  module('patientInfo').
  component('patientInfo', {
    templateUrl: 'patient-info/patient-info.template.html',
    controller: ['$http', '$routeParams',
      function PatientInfoController($http, $routeParams, $scope) {
        var self = this;
        this.patientId = $routeParams.patientId;

        $http.get("patients/" + this.patientId + ".json").then(function(response) {
          self.patient = response.data;
        });
      }
    ]
  });

template.html

<div class="container-fluid">
  <h1>{{$ctrl.patient[0].first_name}} {{$ctrl.patient[0].last_name}}</h1>
  <div class="col-md-2">
    <!--Sidebar content-->
  </div>

  <div class="col-md-10">
    <!--Body content-->
    <form action="" >
      <p>First Name: <input type="text" ng-model="first_name"></p>
      <p>Last Name: <input type="text" ng-model="last_name"></p>
      <p>Patient Date of Birth: <input type="text" ng-model="patient_dob" ></p>
    </form>
  </div>
</div>

我想要完成的是使用JSON文件中的元素填充所有这些字段(name,dob)。我的问题很可能是双重的:

  1. 当我写$scope.first_name = "anything"时,我被告知Cannot set property 'first_name' of undefined。为什么会这样?
  2. 假设我弄清楚了第一项,我将如何使用JSON文件中的字段(self.patient或response.data)?我能写一下:$scope.first_name = self.patient[0].first_name吗?我的直觉是否定的,那么在我的控制器中引用JSON数据的正确方法是什么?
  3. 奖金问题:使用像这样的组件而不是更传统的控制器定义时,应该注意哪些特性?我对网络开发比较陌生,并且发现自己被完成同样事情的方法所淹没。

    示例响应数据只是一个具有单个值的JSON数组:

    [{"first_name": "John", "last_name": "Doe", "hospital_name": "Mayo Clinic","dob": "01/01/01"}]
    

2 个答案:

答案 0 :(得分:1)

在评论中回答了第一个问题,让我们转到第二个问题。

答案是肯定的,你可以这样写:

Object.assign

&#13;
&#13;
$http.get("patients/" + this.patientId + ".json").then(function(response) {
        //this will copy all properties from response.data[0] into $scope
        Object.assign($scope, response.data[0]);
    });
&#13;
&#13;
&#13;

然后,在收到请求后,您将能够在该字段中看到数据。 但有时$ digest循环(更新html中所有值的angular.js事物)不会对异步调用做出反应,因此您可以尝试使用此代码

&#13;
&#13;
angular.
  module('patientInfo').
  component('patientInfo', {
    templateUrl: 'patient-info/patient-info.template.html',
    controller: ['$http', '$routeParams', '$scope', '$timeout',
      function PatientInfoController($http, $routeParams, $scope, $timeout) {
        var self = this;
        this.patientId = $routeParams.patientId;

        $http.get("patients/" + this.patientId + ".json").then(function(response) {
          $timeout(function() {
            Object.assign($scope, response.data[0])
          });
        });
      }
    ]
  });
&#13;
&#13;
&#13;

在最后一个片段中,我添加了来自angular的$ timeout指令,该指令在执行后触发$ digest循环

答案 1 :(得分:1)

问题是你没有在控制器定义数组中使用$scope服务

angular.
  module('patientInfo').
  component('patientInfo', {
    templateUrl: 'patient-info/patient-info.template.html',
    controller: ['$http', '$routeParams', '$scope', //This was missing
      function PatientInfoController($http, $routeParams, $scope) {
        var self = this;
        this.patientId = $routeParams.patientId;

        $http.get("patients/" + this.patientId + ".json").then(function(response) {
          self.patient = response.data;

          //Now you can write

          $scope.first_name = "anything"

        });
      }
    ]
  });