CODEWITHSUNDEEP
angularjs
ChaseLouisPowers
ChaseLouisPowers

Reputation: 765

AngularJS ng-repeat only for Items with a Specific Subfield

How can I get ng-repeat to only repeat items which contain subfields? I have a list of videos that updates based on language preference. I want to do something like ng-repeat="video in videos" only where ng-show="video.title[videoLanguage]" would make the element show. When I try using ng-show, it works somewhat but I have other code that works based on the length of the videos list (which updates since not all the videos are available in every single language).

Here's my code:

            <ul ng-init="select=0" ng-style="{'margin-top': ((videoContainerHeight - (videos.length * 160)) / (videos.length - 1)) * select}">
                <li ng-repeat="video in videos" ng-class="{'selected': select == $index}" ng-click="$parent.select=$index; changeNextPage(video.url);">
                    <div class="thumbnail"></div>
                    <div class="title">
                        <div class="title-cell">
                            <h2 ng-bind="video.title[videoLanguage]"></h2>
                        </div>
                    </div>
                </li>
            </ul>

Videos list object:

 {
    "id": "videos",
    "url": "/videos",
    "view": "views/videos.html",
    "nextPage": "#/home",
    "videos": [{
        "url": "#/videos/extraction",
        "thumbnail": "img/thumbnails/thumbnail.jpg",
        "title": {
            "english": "Short Title"
        }
    }, {
        "url": "#/videos/extraction",
        "thumbnail": "img/thumbnails/thumbnail.jpg",
        "title": {
            "english": "Longer Title Here",
            "spanish": "Hi"
        }
    }, {
        "url": "#/videos/extraction",
        "thumbnail": "img/thumbnails/thumbnail.jpg",
        "title": {
            "english": "This is a Really Really Really Long Title",
            "spanish": "Hi"
        }
    }, {
        "url": "#/videos/extraction",
        "thumbnail": "img/thumbnails/thumbnail.jpg",
        "title": {
            "english": "Short Title",
            "spanish": "Hi"
        }
    }]
   }

I'm looking to have ng-repeat generate a 4 item list when the language is set to english and a 3 item list when the language is set to Spanish.

Upvotes: 0

Views: 204

Answers (2)

Zohaib Ijaz
Zohaib Ijaz

Reputation: 22895

I have created a fiddle , I think this is exactly what you want, ahve a look

https://jsbin.com/dinuku/edit?html,js,output

I created a filter to filter items based on language

app.filter('languageFilter', function() {
  return function(array, lang) {
    return (array || []).filter(function(item) {
      if (lang in item.title) {
        return true;
      }
      return false;
    });
  };
});

Upvotes: 1

01axel01christian
01axel01christian

Reputation: 970

I suggested you the ng-switch ng-switch doc

Upvotes: 0

Related Questions