У меня проблема с фильтром при поиске численного значения. Я хочу иметь точный поиск (используя фильтр custum) на "matricule", но это проблема в моем коде, и я не знаю. это мой индекс:
<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 ОБРАЗЕЦ
БЛАГОДАРЯ
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>
КОНТРОЛЛЕР
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);
};
});
Ссылка: точный фильтр в угловом
--------- ОБНОВЛЕНО v2 -----
Чтобы отобразить "none" из списка, если поле поиска пуст, необходимо сохранить результат:
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>