使用AngularJS過濾表格

我剛剛進入AngularJS，我試圖過濾表格。到目前爲止，我動態創建我的表，這工作正常。使用AngularJS過濾表格

HTML：

<div ng-app="tableApp" ng-controller="tableAppController"> 
     <input type="text" class="form-control" ng-model="searchKey" placeholder="search..."/> 

         <div class="table-responsive"> 
          <table class="table table-striped" id="trackingTable"> 
           <thead> 
            <tr> 
             <th>No.r.</th> 
             <th>a</th> 
             <th>b</th> 
             <th>c</th> 
            </tr> 
           </thead> 
           <tbody> 
            <tr ng-repeat="x in deviceData"> 
             <td>{{ $index + 1 }}</td> 
             <td>{{x.a}}</td> 
             <td>{{x.b}}</td> 
             <td>{{x.c}}</td> 
            </tr> 
           </tbody> 
          </table> 
         </div> 
        </div> 
        <script src="scripts/AngularJS/tableAppController.js"></script>

tableAppController.js：

var app = angular.module('tableApp', []); 
app.controller('tableAppController', function ($scope) { 
$scope.deviceData = [{a: "123", b: "123", c: "01.01.2001"}, {a: "dummyDeviceID2", b: "dummyCarID98", c: "01.01.2001"}]; 
});

我現在想實現一個過濾器，它基於從一個文本框的用戶輸入的表格過濾數據。但只有當用戶在課程的文本框內鍵入內容時纔有效。我開始將html文件中的<tr ng-repeat="x in deviceData">行更改爲<tr ng-repeat="x in deviceData | filter:{'a':searchKey}">爲什麼此方法無法正常工作，我該如何解決此問題？

來源

2016-04-04 d4rty

您應該能夠使用您的搜索對象上的按鍵來做到這一點：

<input type="text" class="form-control" ng-model="searchKey.a" placeholder="search..."/> 

<tr ng-repeat="x in deviceData | filter:searchKey">

看到更多的背景下正式例如線36：http://plnkr.co/edit/YUfG7yzxBQ0gT9bsnTN2?p=preview

來源

2016-04-04 15:52:32 tyler

試試這個：

{{ filter_expression | filter : expression : comparator}} 

<tr ng-repeat="x in deviceData | filter : searchKey">

AngularJS官方文檔：filter

Plnkr：http://plnkr.co/edit/r6cchqzftaRiH543L1NE?p=preview

來源

2016-04-04 15:52:57

這不僅對'了'屬性篩選，如OP要求 – tyler

@tyler，我檢查其工作文件。我更新了plnkr..please檢查。 –

完美 - 在你的plunkr的搜索框中鍵入98，你會發現它不是隻在'a'屬性上過濾。但是，如果您將第10行更改爲讀取'ng-model =「searchKey.a」'（正如我的答案中所建議的那樣），它將在'a'屬性上過濾僅僅 – tyler

使用AngularJS過濾表格

回答

相關問題