Question

如何让ng-repeat仅重复包含子字段的项目？我有一个基于语言偏好更新的视频列表。我想做一些像ng-repeat =＆＃34;视频中的视频＆＃34;只有在ng-show =＆＃34; video.title [videoLanguage]＆＃34;会让元素显示出来。当我尝试使用ng-show时，它有点工作，但我有其他代码根据视频列表的长度（由于并非所有视频都以每种语言提供而更新）。

这是我的代码：

            <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>

视频列表对象：

 {
    "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"
        }
    }]
   }

我希望当语言设置为英语时，ng-repeat会生成4个项目列表，而当语言设置为西班牙语时，我会查找3个项目列表。

Answer 1

我创造了一个小提琴，我想这正是你想要的，看看

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

我创建了一个过滤器来根据语言过滤项目

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

Answer 2

我建议你使用ng-switch ng-switch doc

AngularJS ng-repeat仅适用于具有特定子字段的项目

2 个答案: