Вложенные ng-repeat на двух отдельных массивах

Question

Больше, чем найти способ решить эту проблему, теперь меня интересует, почему это не работает.

Скажем, у меня есть этот массив в угловой:

$scope.movieThemes = [ 'Fiction', 'Drama']; 

И еще один массив с фильмами как:

$scope.movies=[{theme:'Drama', movie:'One million dollar baby'}, {theme:'Drama', movie:'Green mille'},{theme:'Fiction', movie:'Avatar'}, {theme:'Fiction', movie:'The Hobbit'}] 

У меня есть ngRepeat с моими темами

<div ng-repeat= "t in movieThemes"> 

И вложенный datalist фильтрация темы:

ng-repeat="m in movies|filter:{theme:t} 

Где т от родительского ретранслятора, как:

<datalist id="movieList"> 
    <option ng-repeat="m in movies|filter:{theme:t}" value="{{m.movie}} - {{t}}"></option> 
    </datalist> 

ОК, как вы можете подтвердить на моей скрипке это не работает:

Online Demo

Но вопрос почему нет?

Стоит упоминается без списка данных работает отлично:

Without Data List Demo

Answer 1

Попробуйте, как это. Я изменяю ваш синтаксис filter, а также добавляю select тег к dataList.

Редактировать: Ваша проблема cuase для datalist id. i.e ваши datalist ids в ne-repeat такие же. i меняет datalist идентификаторы, добавляя к нему $index. теперь он работает правильно.

var myApp = angular.module('myApp',[]); 
 
myApp.controller('MyCtrl', ["$scope",function MyCtrl($scope) { 
 
    $scope.movieThemes = [ 'Fiction', 'Drama']; 
 
$scope.movies=[ 
 
    {theme:'Drama', movie:'One million dollar baby'}, 
 
    {theme:'Drama', movie:'Green mille'}, 
 
    {theme:'Fiction', movie:'Avatar'}, 
 
    {theme:'Fiction', movie:'The Hobbit'} 
 
]; 
 
    
 

 
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="myApp" ng-controller="MyCtrl"> 
 
    <div ng-repeat= "t in movieThemes"> 
 
    <input type="text" ng-model="t" /> 
 
    {{t}} - {{$index}} <input type="text" placeholder="Users" list="movieList{{$index}}"> 
 
    <datalist id="movieList{{$index}}"> 
 
     <select> 
 
      <option ng-repeat="m in movies|filter:{theme:t}" value="{{m.movie}} - {{t}}"></option> 
 
     </select> 
 
    </datalist> 
 
    </div> 
 
</div>

Answer 2

Вы можете использовать GroupBy фильтр. Таким образом, вам не нужно беспокоиться о тематическом массиве. Вы можете написать свой собственный/использовать угловые фильтры модуля. (https://github.com/a8m/angular-filter)

<ul> 
    <li ng-repeat="(key, value) in movies| groupBy: 'theme'"> 
    Group name: {{ key }} 
    <ul> 
     <li ng-repeat="m in value"> 
     player: {{ m.movie}} 
     </li> 
    </ul> 
    </li> 
</ul> 

BTW Я люблю угловые фильтры модули