Search in Ng-Repeat without hiding anything

Question

Search in Ng-Repeat without hiding anything

88 views Asked by Aqu Akhil At 01 June 2017 at 06:15

The title may be a bit confusing. Please take a look at the code below,

<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>

with these codes i can search for a name from scope.names. But the problem is, i don't want to hide other results while searching for a particular name. Which means, when i search "Gustav", it should be on top of the list without hiding other names. It would be more great if names were sorted by the matching of supplied keyword. Please help in this.

Original Q&A

There are 1 answers

**Stanislav Lohtin** · Accepted Answer · 2017-06-01T07:14:36+00:00

OrderBy is one of the options for the desired effect:

<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>

TechQA.

Search in Ng-Repeat without hiding anything

There are 1 answers

Related Questions in ANGULARJS

Related Questions in ANGULARJS-NG-REPEAT

Related Questions in NG-FILTER

Popular Questions

Popular Tags

Trending Questions