javascript - 如果子/嵌套重复有值，则隐藏 ng-repeat

Question

这个问题已经有答案了:

AngularJS - How to structure a custom filter with ng-repeat to return items conditionally (3 个回答)

已关闭 9 年前。

我有多个 ng-repeats，它们相互依赖。

$scope.niveaus = [
        { niveau: 'a' },
        { niveau: 'b' },
        { niveau: 'c' },
        { niveau: 'd' },
        { niveau: 'e' },
        { niveau: 'f' },
        { niveau: 'g' }
    ];

    $http.get('/goals.json').success(function(goals) {
        $scope.goals = goals;
    });

我填写了硬编码的 niveau A-G。在“目标”列表中，我将 niveaus 的名称与 JSON 中的名称进行匹配。

并执行 ng-repeat:

<ul ng-repeat="niveau in niveaus">

        <li class="foobar">{{ niveau.niveau }}</li>

        <div ng-repeat="goal in goals | unique:'niveau_id'">
            <div ng-if="goal.niveau.name == niveau.niveau">
                <li class="yes">{{ goal.niveau.name }}</li> 
            </div>
        </div>

    </ul>

因此它会检查每个 niveau 的目标。如果目标与名称匹配，则会显示。但现在的问题是，如果 ng-if 中存在匹配项，那么 li.foobar 也会显示。

所以这可以是输出:

但它应该有独特的 niveau 名称。 每行 A-G。并显示重复部分中是否存在 li.yes，它应该从重复列表中隐藏 li.foobar。

但是如何在 Angular 中实现这一点呢？

Answer 1

查看 filters 上的文档

angular.module('myApp', []).filter('withgoals', function() {
return function(input, goals) {
  var out = [] 
  for (var i = 0; i < goals.length; i++) {
    if (input.niveau == goals[i].niveau.name) out.push(input[i])
  }
  return out;      
});


<div ng-repeat='n in niveaus| withgoals: goals'></div>