将角度更新 <tfoot> 内的一个`ng-model`

Question

我正在做角表过滤器。我的 first attempt 是尝试将其包含在标题中。图标显示在错误的位置，当我关注文本框时，排序发生了变化。

所以我将框移到<tfoot>，但它看起来好像被禁用了，因为即使我更改文本框上的内容ng-model="filter_id" 它也不会改变。

外部文本框，完美。

图中：

• 在<tfoot input text>上按1：文本框变为1，事件updateFilteredList触发但filter_id为空，<p input text>和{{filter_id}}都没有变化。
• 在 <tfoot input text> 上再次按 1：文本框变为 11，行为相同
• 在<p input text> 上按1：文本框变为1，{{filter_id}} 更新为1 和updateFilteredList 也收到filter_id=1（即使过滤为1 时返回相同的列表）；

编辑

如果我在外部文本框中键入内容，我会发现应用程序启动时会更新。但是当我在内部输入一个字符时，停止更新。

<div ng-controller="eventCtrl">
  <table class="table table-striped" at-table at-list="filteredList" 
         at-config="config" at-paginated>
    <thead></thead>
    <tfoot>
        <tr>
            <th><input type="text" ng-change="updateFilteredList()" 
                 ng-model="filter_id" style="width: 50px" />
            </th>
        </tr>
    </tfoot>
    <tbody></tbody>
  </table>
  <at-pagination at-config="config" at-list="filteredList"></at-pagination>            
  <p>
      <input type="text" ng-change="updateFilteredList()" 
       ng-model="filter_id" />
      {{filter_id}}
  </p>
</div>

我正在为我的桌子使用这个 plug-in。这是一个错误还是插件的某些行为？有没有办法检测插件是否覆盖了某些事件？

控制器：

 app5.controller('eventCtrl', ["$scope", "$filter", "$http" , function ($scope, $filter, $http) {
    $scope.cars = [
        { Car_ID: 1, X: null, Y: null, RoadName: null, Azimuth: null, DateTime: null, Adress: null }
    ];
    $scope.filteredList = $scope.cars;
    $scope.filter_id = "";

    $scope.updateFilteredList = function () {
        console.log('filter_id: ' + $scope.filter_id);
        $scope.filteredList = $filter("filter")($scope.cars, $scope.filter_id);
        console.log('filteredList.length:' + $scope.filteredList.length);
    };

Answer 1

可能有更好的方法，但这是有效的。因为事件已经触发了，所以我只是在运行过滤器之前从 DOM 中获取值

$scope.filter_id = $('#filter_id').val();

功能

$scope.updateFilteredList = function () {
        $scope.filter_id = $('#filter_id').val();

        console.log('filter_id: ' + $scope.filter_id);
        $scope.filteredList = $filter("filter")($scope.cars, $scope.filter_id);
        console.log('filteredList.length:' + $scope.filteredList.length);
    };