【问题标题】:Autofilling values in AngularJS in new document from table在表格中的新文档中自动填充AngularJS中的值
【发布时间】:2018-12-02 00:39:14
【问题描述】:

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

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

我想要什么: 显示表单时,输入字段将根据该行的表格内的值填充。

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

代码:

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?
  });
};

【问题讨论】:

    标签: javascript html angularjs web


    【解决方案1】:

    解决方法是从服务器获取数据后显示对话框:

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

    【讨论】:

    • 不过,此时数据已经从 api 请求中接收到并放在表上,所以我试图用已经接收到的数据来处理它
    • 你可以使用观察者模式。创建一个回调函数来更新与视图相关的变量。当您收到行数据时,调用此回调。
    • 有什么例子吗?我了解观察者模式,但想不出如何为 angularjs 实现
    • 每次获取表格的行数据时,都必须通知对话框新数据。正确的?您可以通过两种方式做到这一点: 1)使用事件:当您获取表数据时,您发送一个传递行数据的事件。在对话框控制器中,您获取该事件并将数据放入范围。 2) 使用观察者模式:在对话框控制器中创建回调。创建一个服务并在你里面存储回调和方法“通知”和“注册”。在对话控制器内部,您调用注册(回调)。当您获取表格数据时,您会调用通知函数。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2019-01-30
    • 1970-01-01
    • 2012-03-27
    • 1970-01-01
    相关资源
    最近更新 更多