角NG-重複搜索特定字段只

這一定是很常見的但是我一直無法找到答案（所以我希望你們能幫）角NG-重複搜索特定字段只

對於這個問題的目的，我創建了以下小提琴：

HTML：

<div ng-controller="MyCtrl"> 
    <div> 
     <input type="text" ng-model="search.$"/> 
    </div> 
    <table> 
    <thead> 
     <th>Name</th> 
     <th>Street</th> 
     <th>Number</th> 
    </thead> 
    <tbody> 
     <tr ng-repeat="item in tableData |filter:search"> 
     <td>{{item.name}}</td> 
     <td>{{item.street}}</td> 
     <td>{{item.number}}</td> 
     </tr> 
    </tbody> 
    </table> 

</div>

的JavaScript：

var myApp = angular.module('myApp', []); 
function MyCtrl($scope) { 
    $scope.tableData = []; 
    for (i = 0; i < 100; i++) { 
    $scope.tableData.push({ 
     id: i, 
     name: generateRandomName(), 
     street: generateRandomName(), 
     number: generateRandomNumber() 
    }) 
    } 

    function generateRandomName() { 
    var length = 4; 
    var charset = "abcdefghjknpqrstuvwxyzABCDEFGHJKLMNOPQRSTUVWXYZ"; 

    var retVal = ""; 
    for (var i = 0, n = charset.length; i < length; ++i) { 
     retVal += charset.charAt(Math.floor(Math.random() * n)); 
    } 

    return retVal; 
    } 

    function generateRandomNumber() { 
    return Math.floor(Math.random() * 10); 
    } 
}

小提琴可以在這裏找到：Fiddle

現在讓我來解釋一下這個問題。

正如你所看到的物體在此由四個方面組成：id,name,street,number

然而，在我們的餐桌，我們沒有顯示領域id

我們已經增加了所有這些對象對我們tableData陣列。爲了過濾/搜索我們的桌子，我們已經創建了一個輸入框：

 <input type="text" ng-model="search.$"/>

通知的ng-model="search.$"現在有了這個單一的文本輸入我們要搜索的表。然而一些奇怪的是（從用戶的角度來看）：

我們尋找然而，這似乎顯示結果爲不符合我們的搜索連接數95。

問題是即使值未顯示在表中，search.$也會搜索完整對象。上圖中顯示的結果實際上是已找到的對象的id field。由於最大街道號爲10，所以如果搜索數字大於10，將導致錯誤的結果。

所以我的問題是你如何解決這個問題？你怎麼能用單個文本輸入限制搜索對象中的特定字段？

來源

2016-09-16 Marc Rasmussen

選擇將使用自定義過濾器或從每個對象中刪除可能不實際的對象 – charlietfl

有內部控制搜索變量

var myApp = angular.module('myApp', []); 

//myApp.directive('myDirective', function() {}); 
//myApp.factory('myService', function() {}); 

function MyCtrl($scope) { 

$scope.search = ""; 

    $scope.tableData = []; 
    for (i = 0; i < 100; i++) { 
    $scope.tableData.push({ 
     id: i, 
     name: generateRandomName(), 
     street: generateRandomName(), 
     number: generateRandomNumber() 
    }) 
    } 

    function generateRandomName() { 
    var length = 4; 
    var charset = "abcdefghjknpqrstuvwxyzABCDEFGHJKLMNOPQRSTUVWXYZ"; 

    var retVal = ""; 
    for (var i = 0, n = charset.length; i < length; ++i) { 
     retVal += charset.charAt(Math.floor(Math.random() * n)); 
    } 

    return retVal; 
    } 

    function generateRandomNumber() { 
    return Math.floor(Math.random() * 10); 
    } 


}

以及基於搜索值篩選，

<div ng-controller="MyCtrl"> 
    <div> 
     <input type="text" ng-model="search"/> 
    </div> 
    <table> 
    <thead> 
     <th>Name</th> 
     <th>Street</th> 
     <th>Number</th> 
    </thead> 
    <tbody> 
     <tr ng-repeat="item in tableData | filter:{name:search}"> 
     <td>{{item.name}}</td> 
     <td>{{item.street}}</td> 
     <td>{{item.number}}</td> 
     </tr> 
    </tbody> 
    </table> 

</div>

來源

2016-09-16 12:50:32

這將工作的其他值或只爲名稱？是否可以做過濾：{name：search，street：search，number：search}？ –

是的，但是會返回與所有三列匹配的數據。 –

我想你需要定義自己的comparator：

{{ filter_expression | filter : expression : comparator}}

看到filter

來源

2016-09-17 09:08:56 synh

角NG-重複搜索特定字段只

回答

相關問題