javascript - 如何使用 Angular 通过 DOM 中的变量名称访问对象的键

Question

我有一个 Controller ，它向范围添加一个名为 comments 的变量

$scope.showComments = function(id){
    dataService.getComments(id).then(function(data){
        $scope.comments[id] = data.comments;
        console.log($scope.comments);
    });
}

我想在特定的 id 上调用 ng-repeat。以下方法不起作用。有什么想法吗？

<div class="commentsContainer" id="{{id}}">
    <div class="eachcomment" ng-repeat="comment in comments.{{id}}">
        <p>{{comment.content}}
    </div>
</div>

将所需的 id 赋予外部 div。但是 ng-repeat 不起作用。

Answer 1

您应该使用过滤器来实现此功能，如下所示:

<div class="eachcomment" ng-repeat="comment in comments | filterId: id">
    <p>{{comment.content}}
</div>

现在，编写一个过滤器:

app.filter('filterId', function(){
    return function(collection, id) {
        var output = [];
        angular.forEach(collection, function(item) {
            if(item.id == id) {
                output.push(item)
            }
        })
        return output;
    }
})

或者您可以使用更简单的方法:

<div class="eachcomment" ng-repeat="comment in comments | filter: checkId">
        <p>{{comment.content}}
    </div>

在你的 Controller 中:

$scope.checkId = function(item) {
    if($scope.id == item.id) {
        return true;
    }
    return false;
}