Dalorzo Dalorzo - 10 months ago 88
AngularJS Question

nested ng-repeat on two separate arrays

More than finding a way to resolve this, I am now interested in understanding why this is not working.

Let's say I have this array in angular:

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

And another array with with movies like:

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

I have an ngRepeat with my themes

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

And a nested datalist filtering the themes:

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

Where t is from the parent repeater like:

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

OK as you can confirm on my fiddle this is not working:

Online Demo

But the question is why not?

Worth to mentioned without a data list it works fine:

Without Data List Demo


Try like this. i change your filter function syntax and also add select tag to dataList.

Edit: Your problem cuase for datalist id. i.e your datalist ids in ne-repeat are same. i change datalist ids by adding $index to it. now it work correctly.

var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl', ["$scope",function MyCtrl($scope) {
   $scope.movieThemes = [ 'Fiction', 'Drama'];
  {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}}">
            <option  ng-repeat="m in movies|filter:{theme:t}" value="{{m.movie}} - {{t}}"></option>