CODEWITHSUNDEEP
javascripthtmlangularjs
carreankush
carreankush

Reputation: 651

How to show a error message for no match found in ng repeat for filter

I have a text box and few divs coming from ng repeat ,when I search anything on text box it will show the result based on search.But if no match found I should get an error message,I have used ng show here based on value but that message is not showing. Can anyone please help me on it.I am new to angular js.Here is the code below

html

<script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.1/angular.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.4/angular-filter.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.1/angular-sanitize.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.js'></script>
<script  src="script.js"></script>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css'>
 <body ng-app="app">     
  <div ng-controller="AccordionDemoCtrl">
    <div class="scroll-div"> 
<div><input type="text" placeholder="search" ng-model="item"/>  
      <div style="border:1px solid;" id="anchor{{group.id}}"  ng-repeat="group in groups | filter:item">

          {{ group.title }}   
        </div> 
      <p ng-show="!groups.length">No record found</p>       
      </div>
    </div>

  </div>
  </body>

script.js

var app=angular.module('app', ['ui.bootstrap','ngSanitize','angular.filter']);
app.controller('AccordionDemoCtrl', function ($scope,$location,$anchorScroll) {
  $scope.oneAtATime = true;

  $scope.groups = [
    {
      title: 'title 1',
      id:'1',
      list: ['<i>item1a</i> blah blah',
        'item2a'       
        ]
    },
    {
      title: 'title 2',
      id:'2',
      list: ['<i>item1a</i> blah blah',        
        'item3a'        
        ]
    },
    {
      title: 'title 3',
      id:'3',
      list: ['<i>item1a</i> blah blah',       
        'item4a'        
        ]
    },
    {
      title: 'title 4',
      id:'4',
      list: ['<i>item1a</i> blah blah',      
        'item5a'        
        ]

    },
    {
      title: 'title 5',
      id:'6',
      list: ['<i>item1a</i> blah blah',       
        'item6a'        
        ]
    },
    {
      title: 'title 6',
      id:'5',
      list: ['<i>item1a</i> blah blah',        
        'item7a'
        ]
    }
  ];
  $scope.test = function() {    
  $scope.predicate = 'id'; 
  $scope.reverse=true;
  }
$scope.groups[0].isOpen = true;
});

Upvotes: 0

Views: 422

Answers (1)

BartoszTermena
BartoszTermena

Reputation: 1487

Try with that: 

<div ng-show="!(groups | filter:item).length">No record found</div>

Example: http://plnkr.co/edit/HCVcneFSOhyN3IWQbX75?p=preview

Upvotes: 1

Related Questions