Question

我在创建动态数量的select以用于过滤ng-repeat时遇到问题。

我是从一个看起来像这样的JSON对象加载的：

[
    {"filter":"Age",
        "options": ["Young", "Middle-aged", "Old"]
    },
    {"filter":"Color",
        "options": ["Blue", "Red", "Yellow"]
    }
]

我无法访问用于生成HTML的代码，但我可以使用ng-repeat或ng-options正确地格式化选择和选项，但无论如何，我都无法获取实际上过滤我的数据。如果我只是硬编码选择的HTML，它工作正常，所以唯一的区别是在生成的版本中，外部有一个额外的div与ng-repeat行。对不起，我没有关于我的代码，但如果有人需要看到类似的内容，我可以尝试写一些类似的内容。基本上，最终产品，如果我只是硬代码，看起来像这样，如果我生成它，外部div只有一个额外的ng-repeat="person in people"。

<div>
    <label>Age:</label>                                                                  
    <select ng-model="query.age">
        <option value="Young">Young</option>                                                  
        <option value="Middle-aged">Middle-aged</option>                                 
        <option value="Old">Old</option>                                                  
    </select>
</div>

我认为问题在于范围界定。我发现，如果我在页面的某个地方只有{{person.age}}，它可以在硬编码版本中工作，而不是在生成的版本中工作，但我不知道解决它的最佳方法是什么。我知道父作用域不能直接访问子作用域，所以我想知道构造它的最佳方法是什么。

编辑：这个Plnkr就是我的意思。我无法生成选择在过滤器上工作。如果我对它们进行硬编码，它可以正常工作，但只是生成的那些似乎没有做任何事情。

Answer 1

如果我理解正确，这应该有效：

ANGULAR：

angular
    .module('testApp', [])
    .controller('MyCtrl', function($scope) {
        $scope.items = 
            [
                {"filter":"Age",
                    "options": ["Young", "Middle-aged", "Old"]
                },
                {"filter":"Color",
                    "options": ["Blue", "Red", "Yellow"]
                }
            ];
    });

HTML：

<div ng-controller="MyCtrl">
  <div ng-repeat="item in items">
    <label>{{ item.filter }}:</label>
    <select ng-options="o for o in item.options"
            ng-model="item.selected"></select>
  </div>
</div>

这是Plnkr

<强>更新如果要对此应用过滤器，可以在ng-repeat

中使用以下代码

<div ng-repeat="person in people | filter: (items | filter: { filter: 'age' })[0].selected">
  {{ person.name }}
</div>

更新了Plnkr

生成用于过滤的选择列表

1 个答案: