ng-show when array length is zero

匿名 (未验证) 提交于 2019-12-03 03:04:01

问题:

I am a beginner for AngularJS. I am trying to display "No Tag Found" during filter process with the help of "ng-show".

JS:

function simpleController($scope) { $scope.tags = ['HTML','CSS','Jquery','Bootstrap','AngularJS']; } 

HTML:

<div ng-controller="simpleController"> <input  class="txt" type="text" ng-model="nameText" />  <div>  <ul>   <li ng-repeat="myKeys in tags| filter:nameText">{{myKeys}}</li>  </ul> <div ng-show="!tags.length">No Tag Found</div> </div> </div> 

When I type any value other than array vales, I am not able to get "No Tag Found" using the above code. Please help. Thanks.

回答1:

If you're filtering in your ng-repeat, you must apply the same filter for you ng-show. If you don't, the ng-show will always refer to the full array :

<div ng-show="!(tags| filter:nameText).length">No Tag Found</div> 

Working fiddle : http://jsfiddle.net/HB7LU/3149/



回答2:

Just better use ng-hide:

<div ng-hide="tags.length">No Tag Found</div> 


回答3:

 <div class="box" ng-show="team_stores.length > 0" >    

worked for me



回答4:

easy way to create filter... demo is as below

var app = angular.module('myApp', []); app.controller('myctrl', function ($scope) {      $scope.friends = [       { name: "Peter", age: 20 },       { name: "Pablo", age: 55 },       { name: "Linda", age: 20 },       { name: "Marta", age: 37 },       { name: "Othello", age: 20 },       { name: "Markus", age: 32 }     ];  });
<!DOCTYPE html> <html> <head> <title>welcome</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> </head> <body ng-app="myApp" ng-controller="myctrl">    Name: <input ng-model="filter" type="text" />     <ul>         <li ng-repeat="friend in friends |filter:filter">{{friend.name}}</li>          <li ng-show="!(friends| filter:filter).length">data not found</li>         <!--<link ng-repeat="friend in friends|filter:isActive ">-->     </ul>   </body> </html>


回答5:

Also you can try to use filter service, like this: $filter('filter')(array, expression, comparator), this service return new array.
you can see http://code.angularjs.org/1.2.16/docs/api/ng/filter/filter



标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!