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}

t 来自父转发器，如：

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

好的，因为你可以在我的小提琴上确认这不起作用：

taphold event

但问题是为什么不呢？

值得一提的是没有数据列表它可以正常工作：

Online Demo

Answer 1

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

修改您的问题是datalist id。即datalist中的ne-repeat ID是相同的。我通过向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'} ]; }]); ID。现在它正常工作。

＆＃13;
＆＃13;
<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>
＆＃13;
{{1}}
＆＃13;
＆＃13;
＆＃13;

Answer 2

您可以使用groupBy过滤器。这样你就不用担心主题阵列了。您可以编写自己的/使用角度过滤器模块。（https://github.com/a8m/angular-filter）

{{1}}

BTW我喜欢角度滤镜模块

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

2 个答案: