javascript - 在两个单独的数组上嵌套 ng-repeat

Question

我现在不仅想找到解决此问题的方法，还想了解为什么这不起作用。

假设我有这个 Angular 数组:

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

还有一个嵌套的数据列表过滤主题:

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

其中 t 来自父中继器，例如:

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

好的，你可以在我的 fiddle 上确认这不起作用:

<强> Online Demo

但问题是为什么不呢？

值得一提的是，没有数据列表它也能正常工作:

Without Data List Demo

Answer 1

尝试这样。我更改了您的 filter 函数语法，并将 select 标记添加到 dataList 中。

编辑: 您的问题是由 datalist id 引起的。即您在 ne-repeat 中的 datalist id 是相同的。我通过添加 $index 来更改 datalist id。现在它可以正常工作了。

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>