可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效,请关闭广告屏蔽插件后再试):
问题:
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