過濾器精確搜索並與數值匹配

當我搜索數字值時，我的過濾器出現問題。我希望在「matricule」上有一個精確的搜索（使用custum過濾器），但這是我的代碼中的一個問題，我不知道。這是我的索引：過濾器精確搜索並與數值匹配

<html> 
 
    <head> 
 
    <meta charset='utf-8'> 
 
    <script src="js/angular.js"></script> 
 
    <script src="js/app.js"></script> 
 
    <link rel="stylesheet" href="css/bootstrap.css"> 
 
    </head> 
 
    <body ng-app="MyApp"> 
 
    <div ng-controller="MyCtrl"> 
 

 
     <h3>Filter by numeric value</h3> 
 
     <form class="form-inline"> 
 
     <input ng-model="match.matricule" type="text" placeholder="Filter by matricule" autofocus> 
 
     </form> 
 
     <ul ng-repeat="friend in (result = (friends | exact: match)) "> 
 
     <li>{{friend.matricule}} - {{friend.name}} ({{friend.age}})</li> 
 
     </ul> 
 
     <p ng-show="result.length == 0"> Not Found </p> 
 
     {{result}} 
 

 
    </div> 
 

 
    </body> 
 
</html>

這是我的控制器：

var app = angular.module("MyApp", []); 
 

 
app.controller("MyCtrl", function($scope) { 
 
    $scope.friends = [ 
 
    { matricule :1 , name: "Peter", age: 20 , region : 'analamanga1'}, 
 
    { matricule :2 ,name: "Pablo", age: 55 , region : 'analamanga2'}, 
 
    { matricule :3 ,name: "Linda", age: 20 , region : 'analamanga3'}, 
 
    { matricule :4 ,name: "Marta", age: 37 , region : 'analamanga4'}, 
 
    { matricule :5 ,name: "Othello", age: 20 , region : 'analamanga5'}, 
 
    { matricule :11 ,name: "Markus", age: 32 , region : 'analamanga6'} 
 
    ]; 
 

 
    $scope.filterFunction = function(element) { 
 
    return element.name.match(/^Ma/) ? true : false; 
 
    }; 
 

 
}) 
 

 
app.filter('exact', function(){ 
 
    return function(items, match){ 
 
    var matching = [], matches, falsely = true; 
 
    
 
    // Return the items unchanged if all filtering attributes are falsy 
 
    angular.forEach(match, function(value, key){ 
 
     falsely = falsely && !value; 
 
    }); 
 
    if(falsely){ 
 
     return items; 
 
    } 
 
    
 
    angular.forEach(items, function(item){ 
 
     matches = true; 
 
     angular.forEach(match, function(value, key){ // e.g. 'all', 'title' 
 
     if(!!value){ 
 
      matches = matches && (item[key] === value); 
 
     } 
 
     }); 
 
     if(matches){ 
 
     matching.push(item); 
 
     } 
 
    }); 
 
    return matching; 
 
    } 
 
});

樣品：plnkr SAMPLE

感謝

來源

2015-11-25 ALFA

OMG ......如果只想要過濾這你讓這麼難，u可以使用角度濾波使其很容易，U只需要做到這一點：

HTML：

<html> 
    <head> 
    <meta charset='utf-8'> 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script> 
    <script src="app.js"></script> 

    </head> 
    <body ng-app="MyApp"> 
    <div ng-controller="MyCtrl"> 

     <h3>Filter by numeric</h3> 
     <form class="form-inline"> 
     <input ng-model="match.matricule" type="text" placeholder="Filter by matricule" autofocus> 
     </form> 

     <ul ng-repeat="friend in friends | filter:match:strict"> 
     <li>{{friend.matricule}} - {{friend.name}} ({{friend.age}})</li> 
     </ul> 
     <p ng-show="result.length == 0"> Not Found </p> 

    </div> 

    </body> 
</html>

CONTROLLER

var app = angular.module("MyApp", []); 

app.controller("MyCtrl", function($scope) { 
    $scope.friends = [ 
    { matricule :1 , name: "Peter", age: 20 , region : 'analamanga1'}, 
    { matricule :2 ,name: "Pablo", age: 55 , region : 'analamanga2'}, 
    { matricule :3 ,name: "Linda", age: 20 , region : 'analamanga3'}, 
    { matricule :4 ,name: "Marta", age: 37 , region : 'analamanga4'}, 
    { matricule :5 ,name: "Othello", age: 20 , region : 'analamanga5'}, 
    { matricule :11 ,name: "Markus", age: 32 , region : 'analamanga6'} 
    ]; 
});

參考：https://docs.angularjs.org/api/ng/filter/filter

----------------------- EDITED -------------

好吧，對不起，我不明白你的問題很好。讓我們試試這個：

HTML：

<html> 
    <head> 
    <meta charset='utf-8'> 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script> 
    <script src="app.js"></script> 

    </head> 
    <body ng-app="MyApp"> 
    <div ng-controller="MyCtrl"> 

     <h3>Filter by numeric</h3> 
     <form class="form-inline"> 
     <input ng-model="matricule" type="text" placeholder="Filter by matricule" autofocus> 
     </form> 

     <ul ng-repeat="friend in friends | filter:myFilter"> 
     <li>{{friend.matricule}} - {{friend.name}} ({{friend.age}})</li> 
     </ul> 
     <p ng-show="result.length == 0"> Not Found </p> 

    </div> 

    </body> 
</html>

控制器：

var app = angular.module("MyApp", []); 

app.controller("MyCtrl", function($scope) { 
    $scope.friends = [ 
    { matricule :1 , name: "Peter", age: 20 , region : 'analamanga1'}, 
    { matricule :2 ,name: "Pablo", age: 55 , region : 'analamanga2'}, 
    { matricule :3 ,name: "Linda", age: 20 , region : 'analamanga3'}, 
    { matricule :4 ,name: "Marta", age: 37 , region : 'analamanga4'}, 
    { matricule :5 ,name: "Othello", age: 20 , region : 'analamanga5'}, 
    { matricule :11 ,name: "Markus", age: 32 , region : 'analamanga6'} 
    ]; 

    $scope.myFilter = function (data) { 

    if ($scope.matricule === '' || !$scope.matricule) return true; 
    var reg = RegExp("^" + $scope.matricule + "$"); 
    return reg.test(data.matricule); 
}; 
});

參考：exact filter in angular

---------修訂版V2 -----

如果搜索字段爲空，則從列表中顯示「無」，需要保存結果過濾：

HTML：

<html> 
    <head> 
    <meta charset='utf-8'> 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script> 
    <script src="app.js"></script> 

    </head> 
    <body ng-app="MyApp"> 
    <div ng-controller="MyCtrl"> 

     <h3>Filter by numeric</h3> 
     <form class="form-inline"> 
     <input ng-model="matricule" type="text" placeholder="Filter by matricule" autofocus> 
     </form> 

     <ul ng-repeat="friend in (filteredItems = (friends | filter:myFilter))"> 
     <li>{{friend.matricule}} - {{friend.name}} ({{friend.age}})</li> 
     </ul> 
     <p ng-show="filteredItems.length == 0"> Not Found </p> 

    </div> 

    </body> 
</html>

來源

2015-11-25 11:48:13 Javierif

我的問題是，當我搜索「1」，我想有「1」只有在結果而不是「1」和「11」。它不適用於這個代碼， – ALFA

試試這個，我更新主要問題。 – Javierif

它的工作原理非常感謝:) – ALFA

過濾器精確搜索並與數值匹配

回答

相關問題