javascript - 如果子/嵌套重复的值为[duplicate]，则隐藏ng-repeat

This question already has answers here:

AngularJS - How to structure a custom filter with ng-repeat to return items conditionally
                                
                                    （3个答案）
                                
                        
                5年前关闭。
            
        

我有多个相互依赖的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中实现呢？

最佳答案

检查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>