AngularJS if/else in ng-repeat

Question

js i have this...

controller: "photogridCtrl",
templateUrl: 'js/ng-assets/templates/directives/photogrid-view.html',
scope: '=info'

in my controller i have 2.

$scope.home = [
    {
        img: 'img/burlington.jpg', 
        label: 'Burlington', 
        action: '#/', 
        row:'col-md-12', 
        class:''
    }

and the other one is...

$scope.featured = [
    {
        img: 'img/kitchener.jpg', 
        label: 'Kitchener', 
        action: '#/', 
        row:'col-md-12', 
        class:''
    }

in my view...

<div class="photo-grids">
    <div class="row">
        <div class='{{item.row}} margin-bottom' ng-repeat='item in home'>
        <a href="{{item.action}}" class="photo-item {{item.class}}" style="background-image:url({{item.img}});">
        <span class="photo-caption"><h4>{{item.label}}
        <br><small>Ontario</small></h4></span>
        </a>
    </div>
</div>

and in my main index i have 2 party of the page where i want to display the photogrid-view.html

<photogrid-view></photogrid-view>

<photogrid-view info='featured'></photogrid-view>

Now as you can see in my ng-repeat i have "item in home" I just want to ask how I can change home to something that will change depending on the variable in <photogrid-view info='featured'></photogrid-view so if it is featured it will output the values from $scope.featured and if the info=home then it will output the values from $scope.home. So it would be like...

If info=='home' then ng-repeat="item in home" else if info==''featured then ng-repeat="item in featured" sorry for the long explanation. But thanks! :)

if you use a isolated scope, you can use ng-repeat="item in info" and set info from the outside like info before. <photgrid-view info='featured'></photgrid-view > <photgrid-view info='home'></photogrid-view> Or is the controller the controller of the component/directive? — Thomas Zoé
– Thomas Zoé, Commented Sep 1, 2016 at 15:23
How will i get the value from <photgrid-view info='featured'> Info? — jeeeee
– jeeeee, Commented Sep 1, 2016 at 15:47
I haven't seen the syntax you are using before, but it seems you are using a directive. If you use scope: {info:'='} and <photo-grids info="myArray"> the value of $scope.myArray is automatically bound to the isolated scope of the directive. — Thomas Zoé
– Thomas Zoé, Commented Sep 2, 2016 at 8:17

KoIIIeY · Accepted Answer · 2016-09-01 15:22:35Z

1

$scope.returnArray = function(){
    if($scope.info){
        return $scope.featured;
    }
    return $scope.home;
}

in view:

<div class='{{item.row}} margin-bottom' ng-repeat='item in returnArray()'>

or:

<div ng-init="entities = returnArray()"></div>
<div class='{{item.row}} margin-bottom' ng-repeat='item in entities'>

or just in view:

<div ng-show="info" class='{{item.row}} margin-bottom' ng-repeat='item in featured'>
<div ng-hide="info" class='{{item.row}} margin-bottom' ng-repeat='item in home'>

answered Sep 1, 2016 at 15:22

KoIIIeY

5581 gold badge8 silver badges26 bronze badges

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

5 Comments

G07cha Over a year ago

You cannot iterate over function using ngRepeat, see this question. Also ng-init doesn't watch changes and as result list won't be updated. So first 3 examples are incorrect.

jeeeee Over a year ago

how will i get the value of info from <photogrid info='featured'>? if info == featured then return $scope.featured?

G07cha Over a year ago

I'm sorry about the function, @KoIIIeY you're right, it doesn't work with raw values but for variables, it does the job. By changes, I meant changing list.

KoIIIeY Over a year ago

@jeeeee , 'info' in your example is variable from scope, if you want (and really, you want :) ) you can remove second ng-repeat div, and ng-repeat use like <div ng-repeat="item in info"></div> Next in your view, <photogrid-view info='featured'></photogrid-view>, where 'featured' - array from scope, $scope.featured :)

KoIIIeY Over a year ago

and yep, I'm and Mikey forgot to close div tag :D

Michelangelo · Accepted Answer · 2016-09-09 14:22:01Z

1

<div ng-if="info === 'featured'" class='{{item.row}} margin-bottom' ng-repeat='item in featured'></div>
<div ng-if="info === 'home'" class='{{item.row}} margin-bottom' ng-repeat='item in home'></div>

This can be achieved easily with ng-if. In my opinion this is better than ng-show because this only appends it to the DOM if the condition is met, while ng-showjust hides it.

edited Sep 9, 2016 at 14:22

answered Sep 1, 2016 at 15:28

Michelangelo

5,9785 gold badges36 silver badges51 bronze badges

1 Comment

jeeeee Over a year ago

i cant make it work witht his code sorry. :( But thanks! :)

Collectives™ on Stack Overflow

AngularJS if/else in ng-repeat

2 Answers 2

5 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related