CODEWITHSUNDEEP
angularjs
Sridhar Paiya
Sridhar Paiya

Reputation: 478

Displaying the ng-repeat only on filtering

I want to filter the ng-repeat values using ng-repeat="obj in object | filter :searchtext"

but it should show the result only after the user give values to the searchtext. it shouldn't list out the values on page load itself.

Thanks in advance :)

Upvotes: 1

Views: 586

Answers (2)

venkat
venkat

Reputation: 469

Have condition like this

ng-if="searchtext" ng-repeat="obj in object | filter :searchtext"

Example:

<!doctype html>
<html ng-app="docsSimpleDirective">
  <head>
<script type="text/javascript" src="http://code.angularjs.org/1.2.13/angular.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
  <body>

<div ng-controller="Ctrl">
  <input type="search" class="form-control" placeholder="Rechercher" data-ng-model="search" />

  <div ng-if="search" ng-repeat="departement in depatements | filter:search">
  <pre>{{departement}}</pre>
  </div>

</div>


  </body>
</html>

script.js:

angular.module('docsSimpleDirective', [])
  .controller('Ctrl', function($scope) {

    $scope.depatements = [
      {"codeDept": "01", "libelleDept": "D1", "libelleRegion":"R1", "codeRegion": "04"},
      {"codeDept": "02", "libelleDept": "D2", "libelleRegion":"R2", "codeRegion": "08"},
      {"codeDept": "03", "libelleDept": "D3", "libelleRegion":"R3", "codeRegion":"09"}
  ];

  })

Upvotes: 1

Pavan Teja
Pavan Teja

Reputation: 3202

you can use ng-show=searchtext on ng-repeat element.

try this snippet 

function ListCrtl($scope) {

  $scope.items = [1, 2, 3, 4, 5];

}
<!DOCTYPE html>
<html ng-app>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>
 
</head>

<body>

  <div ng-controller="ListCrtl">
    <input ng-model="search.term" />
    <p ng-show="search.term" ng-repeat="item in items|filter:search.term">{{item}}</p>
  </div>

</body>

</html>

Upvotes: 4

Related Questions