2016-08-02 27 views
1

私は角度テーブルフィルタを行っています。私のfirst attemptは、それをヘッダーに含めることです。アイコンが間違った位置に表示され、テキストボックスにソートの変更が集中したときに表示されます。は、内部で1つの `ng-model 'を更新します<tfoot>

したがってボックスを<tfoot>に移動しますが、テキストボックスの内容を変更してもそれが変更されないため、何らかの理由で無効になっているように見えます。

外側のテキストボックスは完璧に動作します。絵で

<tfoot input text>

  • プレス1:1にテキストボックスの変更、イベントupdateFilteredListトリガーが、filter_idが空で、どちらも<p input text>{{filter_id}}変更。
  • <tfoot input text>に再びプレス1:テキストボックス11に変更し、同じ動作
  • <p input text>のプレス1:1にテキストボックスの変更、1updateFilteredListから{{filter_id}}更新も1用のフィルタは、同じリストを返す場合でも、(filter_id=1を受け取ります);

EDIT

私はinteralが更新されます外部のテキストボックスに入力するとアプリが起動したときに私が見つけました。しかし、私は内部の1つの文字を入力すると、更新を停止します。

enter image description here

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

答えて

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); 
    }; 
+0

ます。また、[**角度のjqLit​​e **](httpsを使用することができます。 //docs.angularjs.org/api/ng/function/angular.element)。 – developer033

関連する問題