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 ie 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>
3 answers
solution1
0 2015-10-27 10:18:16
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
solution2
0 ACCPTED 2015-10-27 12:16:16
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>
solution3
0 2015-10-27 12:34:18
<!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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Delay in hiding a button using Ng-Hide in Angular JS
Angular ng-hide directive in pure JS
Angular JS: ng-hide and ng-show API
Angular JS Ng-Show / Ng-Hide
Angular js ng-show and ng-hide with animation using toggle class
How to hide a div with angular js ng-hide
Unable to ng-hide elements
ng-hide not working with two filters angularjs
angular js ng-hide in real time doesn't work
Using ng-hide based on previous element in Angular
Related Tags