Unable to display "Not found" using ng-hide and filters in Angular JS

Question

I am trying to implement instant search using filters in angular js. I want the "Not Found!!" message to be displayed when the filter is empty i.e. when no matching result is found. The ng-hide directive doesn't seem to work when filter array is empty.

<!DOCTYPE html>
<html ng-app="myApp">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>

<body ng-controller="places as p">
  <div>

    <input type="text" ng-model="cname" />
    <div ng-repeat="country in abc=(p.countries|filter:cname)">
      <h1>{{country.name}}</h1>{{abc.length}}
      <span ng-hide="abc.length">Not Found!!</span>

    </div>
  </div>
  <script>
    var app = angular.module('myApp', []);

    var arr = [{

      name: 'germany'
    }, {

      name: 'mexico'
    }, {

      name: 'india'
    }, {

      name: 'UK'
    }, {

      name: 'argentina'
    }];


    app.controller('places', function() {

      this.countries = arr;
    });
  </script>
</body>

</html>

Possible duplicate of AngularJS display message when object is empty in repeater — Stefan
– Stefan, Commented Oct 27, 2015 at 10:17
Thank You. Moving the ng-hide outside ng-repeat worked!! . :) — Divya
– Divya, Commented Oct 27, 2015 at 12:13

Furkan Başaran · Accepted Answer · 2015-10-27 10:38:04Z

0

You should update your code like below:

    <div ng-repeat="country in abc = (p.countries | filter:cname)">
      <h1>{{country.name}}</h1>{{abc.length}}
      <span ng-show="abc.length < 1">Not Found!!</span>
    </div>

UPDATED: ng-hide changed to ng-show

edited Oct 27, 2015 at 10:38

answered Oct 27, 2015 at 10:18

Furkan Başaran

1,9372 gold badges19 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Divya · Accepted Answer · 2015-10-27 12:16:16Z

0

Moving the ng-hide outside ng-repeat worked!!

<input type="text" ng-model="cname" />
<div ng-repeat="country in abc=(p.countries|filter:cname)">
  <h1>{{country.name}}</h1>{{abc.length}}
</div>
<span ng-hide="abc.length">Not Found!!</span>

answered Oct 27, 2015 at 12:16

Divya

13 bronze badges

Comments

Mitul · Accepted Answer · 2015-10-27 12:34:18Z

0

<!DOCTYPE html>
<html ng-app="myApp">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>

<body ng-controller="places as p">
  <div>

    <input type="text" ng-model="cname" />
    <div ng-repeat="country in abc=(p.countries|filter:cname)">
      <h1>{{country.name}}</h1>{{abc.length}}
      
    </div>
    <span ng-hide="abc.length">Not Found!!</span>
  </div>
  <script>
    var app = angular.module('myApp', []);

    var arr = [{

      name: 'germany'
    }, {

      name: 'mexico'
    }, {

      name: 'india'
    }, {

      name: 'UK'
    }, {

      name: 'argentina'
    }];


    app.controller('places', function() {

      this.countries = arr;
    });
  </script>
</body>

</html>

answered Oct 27, 2015 at 12:34

Mitul

3,4372 gold badges25 silver badges35 bronze badges

1 Comment

Mitul Over a year ago

You have added ng-hide inside the loop thats why it's not display.

Collectives™ on Stack Overflow

Unable to display "Not found" using ng-hide and filters in Angular JS

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related