angular ng-repeat array show only one element

Question

I have an array like this

 $scope.mentors = [ {"name":"Jonathan", "status":0},
                    {"name": "Nathan","status":1},
                    {"name": "Chris","status":1},
                    {"name": "Brian","status":0}];

here my view code

<div ng-repeat="m in mentors">
   <div ng-if="m.status == '1'">
   <div>
     {{m.name}}
   </div>

   </div>
</div>

and my result is : Nathan and Chris

what can I do to just make it show Nathan or Chris it must only show one result only

p/s: already try ng-show="$last" it did not work since Brian status is '0'

Why do you need only one result ? Do you need to show Nathan or Chris ? — Weedoze
– Weedoze, Commented Nov 29, 2017 at 7:37
@Weedoze it can Nathan or Chris but it must only show one. if possible i want Nathan to show first until Nathan status is 0, then it will show Chris.. i hope it not too confusing — Zachary Lordford
– Zachary Lordford, Commented Nov 29, 2017 at 7:39

Marcus Höglund · Accepted Answer · 2017-11-29 07:44:36Z

2

You can filter the array on statuses and then just take the first by checking against $index

angular.module('app', []).controller('myCtrl',function($scope){
$scope.mentors = [ {"name":"Jonathan", "status":0},
                    {"name": "Nathan","status":1},
                    {"name": "Chris","status":1},
                    {"name": "Brian","status":0}];
});

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


<!DOCTYPE html>
<html>
<body ng-app="app">
<div ng-controller="myCtrl">
   <div ng-repeat="m in mentors | filter : {status: 1}">
   <div ng-if="$index == 0">
     <div>
       {{m.name}}
     </div>

   </div>
   </div>

</div>
</body>
</html>

edited Nov 29, 2017 at 7:44

answered Nov 29, 2017 at 7:41

Marcus Höglund

16.9k11 gold badges53 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Weedoze Over a year ago

This is the same code as provided. This does not provide the expected output

Zachary Lordford Over a year ago

sorry no i only want nathan to show not chris as well.. and if nathan status turn '0' only then it will show chris

Zachary Lordford Over a year ago

yes thank you !!... this is exactly like i wanted !! thank @MarcusHöglund

Stathis Papalefkas · Accepted Answer · 2017-11-29 07:42:54Z

2

You could use the limitTo and filter

<div ng-repeat="m in mentors | filter: { status : '1'}| limitTo : 1">
  <div>
   {{m.name}}
  </div>
</div>

answered Nov 29, 2017 at 7:42

Stathis Papalefkas

1216 bronze badges

1 Comment

Zachary Lordford Over a year ago

thank you i din't know that filter and limitTo can be used like this

Weedoze · Accepted Answer · 2017-11-29 07:40:50Z

There is no reason to use ng-repeat if you only need to display 1 item.

You should handle this in your controller. Create a new variable that will hold the mentor that you want to show.

To find Nathan, you can use Array#find(). It will return the first item that matches the condition status === 1

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.mentors = [{
      "name": "Jonathan",
      "status": 0
    },
    {
      "name": "Nathan",
      "status": 1
    },
    {
      "name": "Chris",
      "status": 1
    },
    {
      "name": "Brian",
      "status": 0
    }
  ];
  
  $scope.mentor = $scope.mentors.find(m => m.status === 1);
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
  <h1>{{mentor.name}}</h1>
</div>

Collectives™ on Stack Overflow

angular ng-repeat array show only one element

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related