表中新文档中AngularJS中的值自动填充

时间:2018-06-22 13:54:19

标签: javascript html angularjs web

因此,我正在一个项目中,在该项目中有一张我们服务的不同实例的表,每一行都有一个信息按钮,该按钮会从自动填充到该行的信息中拉出一个表单。

问题: 到我获得该行的值时,页面已经渲染完毕,因此似乎无法自动填充信息。

我想要的东西: 显示表单后,将使用该行的表格内的值填充输入字段。

代码缩短了,我只想发布必要的内容。

代码:

InfoForm.html

<form  name="info_change_request_form">
  <div >
    <md-input-container class="md-block">
      <label>Name</label>
      <input maxlength="255" type="text" name="name" ng-model="info_request.name" required="true"/>
    </md-input-container class="md-block">
  </div>

  <div>
    <md-input-container class="md-block">
      <label>Email</label>
      <input maxlength="255" type="email" name="email" ng-model="info_request.email" required="true"/>
    </md-input-container class="md-block">
  </div>

  <div>
    <md-input-container class="md-block">
      <label>Summary</label>
      <input maxlength="255" type="text" name="summary" ng-model="info_request.summary" rows="5" required="true"/>
    </md-input-container class="md-block">
  </div>

Table.html

<tbody md-body>
          <tr md-row ng-repeat="info in infos">
            <td md-cell>{{info.name}}</td>
            <td md-cell>{{info.email}}</td>
            <td md-cell>
              <md-menu md-position-mode="target-right target" flex="50">

Controller.js

$scope.newInfoForm = function(info) {
  // Build the confirm dialog
  var confirm = $mdDialog.confirm({
    controller: 'InfoController',
    templateUrl: 'app/informationtables/info_change.html',
    clickOutsideToClose: true,
    parent: angular.element(document.body)
  });
  // Show confirm dialog and updates projects list
  // Creation is called upon submitting the form (see create(project))
  $mdDialog.show(confirm).finally(function() {
    // TODO: callback?
  });
};

1 个答案:

答案 0 :(得分:0)

一种解决方案是在从服务器获取数据后显示对话框:

$http.get(api_url).then(function(data) {
    $mdDialog.show({
        locals:{dataToPass: data.infos},                           
        templateUrl: 'your_template_url',
        controller: InfoController,
    });
}

以及在InfoController中:

function InfoController ($scope, dataToPass) { 
    $scope.infos = dataToPass  
}