Question

我有一个html表。在我的<thead>我有两行：一行用于列名，第二行用于输入（用于过滤）。所以，在我的模板中我有：

<table>
<head>
  <tr>
    <th>a</th>
    <th>b</th>
  </tr>
  <tr>
    <th> <input name="a"></th>
    <th> <input name="b"></th>
  </tr>
</thead>
...
</table>

我在这里尝试的是：我希望每次按下一个键时发送到服务器a和b输入值，所以我想订阅这些输入的更改，我想知道是什么实现这个目标的好方法是什么？我认为这里没有必要使用datadriven方法吗？

我的解决方案 也许我可以将[(ngModel)]="filter.a"和[(ngModel)]="filter.b"添加到我的输入中但是如何监听过滤器更改...我不想要订阅filter.a并再次filter.b我只能想要在filter对象上订阅一次，例如：filter.valueChanges.subscribe()

对于这个解决方案，我想知道如何过滤它是一种表单类型？我需要将<table>放在<form #myform="ngForm">内吗？然后在我的模板中，我将订阅myForm.valueChanges？

如果不清楚，请道歉，如果不是欢迎的话！感谢

Answer 1

您可以通过以下小提琴：https://jsfiddle.net/78a9cyv4/

HTML

<input name="a" ng-model="a" ng-change="changeinInput()">

控制器：

$scope.changeinInput = function(){
    console.log("Call to Server ", $scope.a , " & ", $scope.b);
}

说明：

您可以在ng-change字段上使用input，并使用$http函数调用服务器更新的输入值。

Answer 2

您可以按照以下简单代码来实现您的任务

in html

<table>
     <thead>
      <tr>
        <th>a</th>
        <th>b</th>
      </tr>
      <tr>
        <th> <input name="a" [(ngModel)] = "filter.a" (keyup) = "sendData()" ></th>
        <th> <input name="b" [(ngModel)] = "filter.b" (keyup) = "sendData()"></th>
      </tr>
   </thead>
</table>

组件中的

export class Component(){

     filter : any = {
                  a : '',
                  b : ''
               }

      sendData(){

        console.log(this.filter);
      }
}

这里的sendData（）函数将在你在a和b中进行的每次更改后调用，你可以在这个函数中向服务器发送数据。

Answer 3

我使用此代码单独解决：http://plnkr.co/edit/ir5Tn5Vgwuv1NUCkuQSh?p=preview

我认为在所有html标签中使用[formGroup]="form"并不是反模式（不仅仅是<form>）

条件：您需要添加ngForm，因为ngForm会在使用时自动添加

感谢

检查我的过滤器输入的变化

3 个答案: