Angular ng-repeat with condition

Asked
Active3 hr before
Viewed126 times

4 Answers

angularcondition
90%

you can use "ng-show="friend.age >=26" with the ng-repeat="friend in friends". it will only show the friends who's age is greater than and equal to 26.,Connect and share knowledge within a single location that is structured and easy to search.,Please be sure to answer the question. Provide details and share your research!,I used a filter in ng-repeat to:

HTML:

<html ng-app="someApp">

and

<li ng-repeat="friend in friends | age">

JS:

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

someApp.filter('age', function() {
   return function(input, uppercase) {
      var out = [];
      for (var i = 0; i < input.length; i++) {
         if (input[i].age >= 26) {
            out.push(input[i]);
         }
      }
      return out;
   }
});
load more v
88%

The ngRepeat directive instantiates a template once per item from a collection. Each template instance gets its own scope, where the given loop variable is set to the current collection item, and $index is set to the item index or key.,Special properties are exposed on the local scope of each template instance, including:,All different types of tracking functions, their syntax, and their support for duplicate items in collections can be found in the ngRepeat expression description.,When items are reordered, their respective templates are reordered in the DOM.

It is possible to get ngRepeat to iterate over the properties of an object using the following syntax:

<div ng-repeat="(key, value) in myObj"> ... </div>
angular.module('ngRepeat', ['ngAnimate']).controller('repeatController', function($scope) {
   var friends = [{
         name: 'John',
         age: 25
      },
      {
         name: 'Mary',
         age: 40
      },
      {
         name: 'Peter',
         age: 85
      }
   ];

   $scope.removeFirst = function() {
      $scope.friends.shift();
   };

   $scope.updateAge = function() {
      $scope.friends.forEach(function(el) {
         el.age = el.age + 5;
      });
   };

   $scope.copy = function() {
      $scope.friends = angular.copy($scope.friends);
   };

   $scope.reset = function() {
      $scope.friends = angular.copy(friends);
   };

   $scope.reset();
});
<div ng-controller="repeatController">
  <ol>
    <li>When you click "Update Age", only the first list updates the age, because all others have
    a one-time binding on the age property. If you then click "Copy", the current friend list
    is copied, and now the second list updates the age, because the identity of the collection items
    has changed and the list must be re-rendered. The 3rd and 4th list stay the same, because all the
    items are already known according to their tracking functions.
    </li>
    <li>When you click "Remove First", the 4th list has the wrong age on both remaining items. This is
    due to tracking by $index: when the first collection item is removed, ngRepeat reuses the first
    DOM element for the new first collection item, and so on. Since the age property is one-time
    bound, the value remains from the collection item which was previously at this index.
    </li>
  </ol>

  <button ng-click="removeFirst()">Remove First</button>
  <button ng-click="updateAge()">Update Age</button>
  <button ng-click="copy()">Copy</button>
  <br><button ng-click="reset()">Reset List</button>
  <br>
  <code>track by $id(friend)</code> (default):
  <ul class="example-animate-container">
    <li class="animate-repeat" ng-repeat="friend in friends">
      {{friend.name}} is {{friend.age}} years old.
    </li>
  </ul>
  <code>track by $id(friend)</code> (default), with age one-time binding:
  <ul class="example-animate-container">
    <li class="animate-repeat" ng-repeat="friend in friends">
      {{friend.name}} is {{::friend.age}} years old.
    </li>
  </ul>
  <code>track by friend.name</code>, with age one-time binding:
  <ul class="example-animate-container">
    <li class="animate-repeat" ng-repeat="friend in friends track by friend.name">
      {{friend.name}}  is {{::friend.age}} years old.
    </li>
  </ul>
  <code>track by $index</code>, with age one-time binding:
  <ul class="example-animate-container">
    <li class="animate-repeat" ng-repeat="friend in friends track by $index">
      {{friend.name}} is {{::friend.age}} years old.
    </li>
  </ul>
</div>
.example - animate - container {
      background: white;
      border: 1 px solid black;
      list - style: none;
      margin: 0;
      padding: 0 10 px;
   }

   .animate - repeat {
      line - height: 30 px;
      list - style: none;
      box - sizing: border - box;
   }

   .animate - repeat.ng - move,
   .animate - repeat.ng - enter,
   .animate - repeat.ng - leave {
      transition: all linear 0.5 s;
   }

   .animate - repeat.ng - leave.ng - leave - active,
   .animate - repeat.ng - move,
   .animate - repeat.ng - enter {
      opacity: 0;
      max - height: 0;
   }

   .animate - repeat.ng - leave,
   .animate - repeat.ng - move.ng - move - active,
   .animate - repeat.ng - enter.ng - enter - active {
      opacity: 1;
      max - height: 30 px;
   }

The example below makes use of this feature:

<header ng-repeat-start="item in items">
  Header {{ item }}
</header>
<div class="body">
  Body {{ item }}
</div>
<footer ng-repeat-end>
  Footer {{ item }}
</footer>

And with an input of ['A','B'] for the items variable in the example above, the output will evaluate to:

<header>
   Header A
</header>
<div class="body">
   Body A
</div>
<footer>
   Footer A
</footer>
<header>
   Header B
</header>
<div class="body">
   Body B
</div>
<footer>
   Footer B
</footer>
load more v
72%

/echo simulates Async calls:
JSON: /echo/json/
JSONP: //jsfiddle.net/echo/jsonp/
HTML: /echo/html/
XML: /echo/xml/

/echo
load more v
65%

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

app.controller('MainCtrl', function($scope) {
   $scope.stars = ['vicky vette', 'ron jeremy', 'jenna jameson'];
});
load more v

Other "angular-condition" queries related to "Angular ng-repeat with condition"