CODEWITHSUNDEEP
javascriptangularjs
Jan Klimo
Jan Klimo

Reputation: 4930

Only show "No result" once when using nested ng-repeat in AngularJS

My scope has an array of objects named "ideas" in this format:

{
   "id":1,
   "own":true,
   "ideas":[
      "one",
      "two",
      "three",
      "four",
      "five",
      "six",
      "seven",
      "eight",
      "nine",
      "ready"
   ]
}

I first need to filter based on the "own" attribute (custom filter includeReceived). Then I want the final result to return only matching items from the nested "ideas" array.

<div ng-repeat="idea in ideas | includeReceived:checked">
  <div ng-repeat="ideaText in filteredIdeas = (idea['ideas'] | filter:search)">
    {{ideaText}}
  </div>

  <div ng-hide="filteredIdeas.length">There is no result</div>
</div>

This works nicely, but I want to display the message "There is no result" when nothing is found. The above code displays this message for each iteration of the outer ng-repeat. Thank you very much for any ideas.

Upvotes: 2

Views: 928

Answers (3)

Jan Klimo
Jan Klimo

Reputation: 4930

Thanks for the inputs, guys. Using New Dev's approach in Angular 1.2.26, this code does the trick:

<input type="checkbox" ng-model="checked" ng-init="checked=true">Include ideas you received<br/>

<div ng-controller="IdeaCtrl">
    <div ng-repeat="idea in filteredIdeas = (ideas | includeReceived:checked | filter:search)">
    <div ng-repeat="ideaText in idea['ideas'] | filter:search">
        {{ideaText}}
    </div>
  </div>

  <div ng-hide="filteredIdeas.length">There is no result</div>

Upvotes: 2

New Dev
New Dev

Reputation: 49590

You can append the "search" filter to the first set of results to weed-out those results that don't have the searched-for text. Then, Angular 1.3.0 provides an ability to alias the filtered results, so you could do something like:

<div ng-repeat="idea in ideas | includeReceived:checked | filter: {ideas: search} as filteredIdeas">
  <div ng-repeat="ideaText in idea['ideas'] | filter:search">
    {{ideaText}}
  </div>
</div>

<div ng-if="filteredIdeas.length === 0">There is no result</div>

Upvotes: 2

Yasser Shaikh
Yasser Shaikh

Reputation: 47774

You can put the message outside the ng-repeat

<div ng-hide="filteredIdeas.length">There is no result</div>

Upvotes: -1

Related Questions