Angular技术问询：如何绑定两个ng-model值及实现表格分步搜索

嘿，我来帮你搞定这两个AngularJS的问题！

有两种很实用的方法可以实现两个ng-model的双向同步，你可以根据实际需求选择：

• 直接绑定到同一个变量：这是最省心的方式，如果两个控件需要完全同步，直接把它们的ng-model指向同一个作用域变量就行，AngularJS会自动处理双向绑定。举个例子：

<input type="text" ng-model="sharedValue">
<input type="text" ng-model="sharedValue">

不管你改哪个输入框，另一个都会立刻跟着变化。

• 用$watch监听变量变化同步：如果两个ng-model是不同的变量（比如modelA和modelB），需要互相同步，那可以在控制器里用$watch来监听其中一个的变化，然后同步更新另一个。示例代码如下：

app.controller('MyCtrl', function($scope) {
  $scope.modelA = '';
  $scope.modelB = '';

  // 监听modelA的变化，同步到modelB
  $scope.$watch('modelA', function(newVal) {
    $scope.modelB = newVal;
  });

  // 监听modelB的变化，同步到modelA
  $scope.$watch('modelB', function(newVal) {
    $scope.modelA = newVal;
  });
});

这样不管修改modelA还是modelB，另一个都会实时同步更新。

其实不用生硬地“拼接”字符串，而是根据选中的列字段，去过滤表格数据中对应字段包含关键词的项。我给你梳理下具体实现步骤：

首先在HTML里定义选择菜单、输入框和表格结构：

<select ng-model="selectedColumn" ng-options="col for col in columns"></select>
<input type="text" ng-model="searchKeyword" placeholder="输入关键词...">

<table>
  <thead>
    <tr>
      <th ng-repeat="col in columns">{{col}}</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="item in data | filter:searchFilter">
      <td>{{item.Names}}</td>
      <td>{{item.Age}}</td>
      <td>{{item.City}}</td>
    </tr>
  </tbody>
</table>

然后在控制器里处理数据和过滤逻辑：

app.controller('TableCtrl', function($scope) {
  // 模拟你的JSON数据
  $scope.data = [
    {Names: 'John', Age: 25, City: 'New York'},
    {Names: 'Jane', Age: 30, City: 'London'},
    {Names: 'Mike', Age: 28, City: 'Paris'}
  ];

  // 定义可选的搜索列（对应JSON对象的键）
  $scope.columns = ['Names', 'Age', 'City'];
  // 默认选中第一列
  $scope.selectedColumn = $scope.columns[0];
  $scope.searchKeyword = '';

  // 自定义过滤函数，实现按选中列+关键词过滤
  $scope.searchFilter = function(item) {
    // 如果关键词为空，直接返回所有数据
    if (!$scope.searchKeyword) return true;
    // 统一转成小写，实现不区分大小写的搜索
    const targetValue = item[$scope.selectedColumn].toLowerCase();
    const keyword = $scope.searchKeyword.toLowerCase();
    // 判断目标字段是否包含关键词
    return targetValue.includes(keyword);
  };
});

这样操作的时候，当你选择“Names”并输入“John”，表格就会自动过滤出Names字段包含“John”的行。如果需要精确匹配，把includes改成===就可以啦。

内容的提问来源于stack exchange，提问作者user6013527