Menu
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.
586
We can also explicitly check if the array is empty or not. if (arr. length === 0) { console. log("Array is empty!") }
ng-if can only render data whenever the condition is true. It doesn't have any rendered data until the condition is true. ng-show can show and hide the rendered data, that is, it always kept the rendered data and show or hide on the basis of that directives.
You can add condition using ng-if also and this is effective too. You can apply any condition to your list using ng-if attribute. In below example, I have put condition where Age > 20 and IsActive is true. ng-repeat will fetch all records which full fill this scenario.
AngularJS ng-show DirectiveThe ng-show directive shows the specified HTML element if the expression evaluates to true, otherwise the HTML element is hidden.
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/
81
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
