Question

133

Angular js - Show message if ng-repeat is empty

rated 0 times [ 140] [ 7] / answers: 1 / hits: 43428 / 10 Years ago, tue, september 16, 2014, 12:00:00

The following AngularJS application is working with ng-repeat and an applied filter. A certain applied filter leaves no values left. How can I display a notification?

js fiddle

HTML

<div >

<div data-ng-controller=myCtrl>





    <ul >

        <li data-ng-repeat=item in values | filter:filterIds()> 

            <code>#{{item.id}}</code> Item

        </li>

    </ul>



    <p ng-show=!values.length>no vals with this filter</p>

    <button ng-click=loadNewFilter()> filter now</button>

</div>





</div>

AngularJS

var app = angular.module('m', []);



app.controller('myCtrl', function ($scope) {

$scope.values = [{

    id: 1

}, ....

}];



$scope.filter = [1,2,3,4,5,6];



$scope.filterIds = function (ids) {

        return function (item) {

            var filter = $scope.filter;



                 return filter.indexOf(item.id) !== -1;         

        }

 }



$scope.loadNewFilter = function (){

    $scope.filter = [-1];

    $scope.$apply();

}



});

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

alorac

Add To Favorites

Follow

Total Points: 262

Total Questions: 82

Total Answers: 97

Location: Libya

Member since Mon, Dec 7, 2020

4 Years ago

alorac questions

1 Invalid Form Body in Discord.js ban command

Sat, Oct 10, 20, 00:00, 4 Years ago

1 How to change URL without refreshing the page?

Tue, Sep 22, 20, 00:00, 4 Years ago

1 How to Query a Model based on its Relation in Strapi

Wed, Jul 1, 20, 00:00, 4 Years ago

1 How can I access react redux state in index.js file?

Wed, Jun 3, 20, 00:00, 4 Years ago

1 Alpine.js - nested components

Sun, May 17, 20, 00:00, 4 Years ago

View All

answered 10 Years ago debra · Accepted Answer

I think this is what you want:

var app = angular.module('myApp', []);    

app.controller('myCtrl', function ($scope) {

  $scope.values = [

    {id: 1}, 

    {id: 2}, 

    {id: 3}, 

    {id: 4}, 

    {id: 5}, 

    {id: 6}];

    

  $scope.filter = [1,2,3,4,5,6];

        

  $scope.filterIds = function (ids) {

    return function (item) {

      var filter = $scope.filter; 

      return filter.indexOf(item.id) !== -1;       	

    }

  }

        

  $scope.loadNewFilter = function (){

    $scope.filter = [1,5];    

  }                 

});

<script src=https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js></script>

<div ng-app=myApp>

  <div data-ng-controller=myCtrl>               

    <ul>

      <li data-ng-repeat=item in testValue=(values | filter:filterIds())> 

        <code>#{{item.id}}</code> Item

      </li>

    </ul>           

    <p ng-show=!testValue.length>no vals with this filter</p>

    <button ng-click=loadNewFilter()> filter now</button>

  </div>

</div>

FIDDLE LINK

This is Another one FIDDLE LINK check this also