时间戳

首页 > 解决方案 > 在表格中的新文档中自动填充AngularJS中的值

javascript - 在表格中的新文档中自动填充AngularJS中的值

问题描述

所以我正在做一个项目，其中有一个包含我们服务的不同实例的表格，每一行都有一个信息按钮，可以拉出一个表格，其中包含自动填充的行中的信息。

问题： 当我获得该行的值时，页面已经呈现，所以我似乎无法自动填充信息。

我想要什么： 当显示表单时，输入字段将从表内该行的值填充。

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

代码：

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>

表.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">

控制器.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?
  });
};

标签： javascripthtmlangularjsweb

解决方案

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

$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  
}

推荐阅读