Recherche dans Ng-Repeat sans rien cacher

Le titre peut être un peu déroutant. S'il vous plaît jeter un oeil au code ci-dessous,Recherche dans Ng-Repeat sans rien cacher

<html> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> 
<body> 
<div ng-app="myApp" ng-controller="namesCtrl"> 
<input type="text" ng-model="test"><br/> 
<div ng-repeat="x in names | filter:test"> {{ x }}</div> 

<script> 
angular.module('myApp', []).controller('namesCtrl', function($scope) { 
    $scope.names = [ 
     'Jani', 
     'Carl', 
     'Margareth', 
     'Hege', 
     'Joe', 
     'Gustav', 
     'Birgit', 
     'Mary', 
     'Kai' 
    ]; 
}); 
</script> 
</body> 
</html>

avec ces codes, je peux rechercher un nom de portée.names. Mais le problème est, je ne veux pas cacher d'autres résultats tout en recherchant un nom particulier. Ce qui veut dire que quand je cherche "Gustav", il devrait être en haut de la liste sans cacher d'autres noms. Ce serait plus génial si les noms étaient triés en fonction du mot clé fourni. S'il vous plaît aider dans ceci.

Source

2017-06-01 Aqu Akhil

Pouvez-vous nous montrer une sorte de visuel pour ce que vous voulez faire ici? Mon réflexe est que cela devrait être géré par le contrôleur ou peut-être en utilisant une directive. –

Imaginez que la liste ressemble à "chat, chien, perroquet", quand je recherche "chien", la liste devrait ressembler à "chien, chat, perroquet". : D –

Qu'en est-il de la deuxième répétition ci-dessous où le filtre serait 'filter:! Test'? Juste une idée, pas une solution sérieuse. Je pense qu'il y a beaucoup de meilleurs moyens, mais je viens de penser maintenant –

OrderBy est l'une des options pour l'effet désiré:

<html> 
<script 
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"> 
</script> 
<body> 
<div ng-app="myApp" ng-controller="namesCtrl"> 
<input type="text" ng-model="test"><br/> 
<div ng-repeat="x in names | orderBy:customOrdering"> {{ x }}</div> 
{{ log }} 

<script> 
angular.module('myApp', []).controller('namesCtrl', function($scope) { 
    $scope.test = ""; 
$scope.names = [ 
    'Jani', 
    'Carl', 
    'Margareth', 
    'Hege', 
    'Joe', 
    'Gustav', 
    'Birgit', 
    'Mary', 
    'Kai' 
]; 
$scope.customOrdering = function(a) { 
    return a.indexOf($scope.test) == -1; 
    //return a.toUpperCase().indexOf($scope.test.toUpperCase()) == -1; 
    // use that for case insensitive search 
} 
}); 
</script> 
</body> 
</html>

Source

2017-06-01 07:14:36

je l'ai essayé, malheureusement, cela ne fonctionne pas. Rien ne s'est passé quand j'ai cherché "Joe" –

voici le [travail du violon] (https://jsfiddle.net/8g4a5ng5/) –

** Merci ** beaucoup ... Cela ne fonctionne pas seulement parce que j'ai sauté // retourner un.auUpperCase(). indexOf ($ scope.test.toUpperCase()) == -1; // utilise cela pour la recherche insensible à la casse. –

Recherche dans Ng-Repeat sans rien cacher

Répondre

Questions connexes