角度过滤器json对象

Question

我正在尝试根据question 的答案实现过滤器，但它对我不起作用。代码：

function MyCtrl($scope, $timeout)
{
    $scope.tweets = [
        {
            created_at: "Date",
            text: "tweet text",
            users: 
            [
                {
                    name: "user name",
                    screen_name: "user screen name",
                    profile_image_url: "profile pic"
                },
                {
                    name: "user name 2",
                    screen_name: "user screen name 2",
                    profile_image_url: "profile pic"
                }
            ]
        },
        {
            created_at: "Date",
            text: "tweet text 2",
            users: 
            [
                {
                    name: "user name",
                    screen_name: "user screen name",
                    profile_image_url: "profile pic"
                },
                {
                    name: "user name 2",
                    screen_name: "user screen name 2",
                    profile_image_url: "profile pic"
                }
            ]
        },
        {
            created_at: "Date",
            text: "tweet text 3",
            users: 
            [
                {
                    name: "user name",
                    screen_name: "user screen name",
                    profile_image_url: "profile pic"
                },
                {
                    name: "user name 2",
                    screen_name: "user screen name 2",
                    profile_image_url: "profile pic"
                }
            ]
        }
    ];
}

和模板：

<div ng-app ng-controller="MyCtrl">
    <div ng-repeat="tweet in tweets">
        for each tweet, user 2's name should be printed here >>
        {{(tweet.users | filter:{screen_name:'user screen name 2'}).name}}
        _____________________________________
    </div>

</div>

我看到的输出是：

对于每条推文，应在此处打印用户 2 的姓名 >>

---

对于每条推文，应在此处打印用户 2 的姓名 >>

---

对于每条推文，应在此处打印用户 2 的姓名 >>

---

我希望“用户名 2”会在每个“>>”之后打印出来。我不知道为什么该过滤器不适用于每个迭代元素的数组。谢谢。

fiddle

Answer 1

过滤器不返回用户。它返回一个匹配过滤条件的用户数组。所以在这种情况下，一个包含一个用户的数组。

应该是这样的

{{(tweet.users | filter:{screen_name:'user screen name 2'})[0].name}}

你可以自己轻松找到这个，只需使用

{{ (tweet.users | filter:{screen_name:'user screen name 2'}) }}

看看过滤器的结果是什么。

Answer 2

如果同一用户不止一次使用同一消息？

如果您收到来自一位用户的多条消息，则上述答案将不起作用，而是会显示一些奇怪的东西。

为了更好地过滤数据，当对象和数组中有嵌套对象或数组时，应尝试使用过滤器函数。我在这个问题中遇到了类似的问题：Filtering data with AngularJS Filter. How to iterate over objects?

所以，对于你的问题！

首先，您需要上一层才能将过滤器应用于所有对象。在您所在的地方使用过滤器，您无法看到全局并采取行动。正在使用 tack by，因为 ng-repeat 不能在数组中包含重复值。

<div ng-app='app' ng-controller="MyCtrl">
    <div ng-repeat="tweet in tweets | custom track by $index">
        for each tweet, user 2's name should be printed here >>
        {{  tweet }}
        _____________________________________
    </div>
</div>

现在，这是重要的部分。我将 angular.module 注册为应用程序只是因为我更喜欢这种方式。之后，我创建了一个在 html 代码中访问的名为 custom 的过滤器。

var app = angular.module('app', []);

我对你的代码做了一点改动，所以我可以更好地看到它：

app.controller('MyCtrl', function ($scope, $timeout){...});

app.filter('custom', function () {
    return function (tweets) {
        var formatted = []; //Initialize array to be returned.
        for (var j = 0; j < tweets.length; j++) { //Iterate over all tweets.
            var tweet = tweets[j]; //Select a single tweet.
            //Above, iterate over all users on a tweet.
            for (var i = 0; i < tweet.users.length; i++) {
                var user = tweet.users[i]; //Select a single user of the tweet.
                if (tweet.user[i].screen_name == 'user screen name 2'){
                    //If match what you want, insert it in the array to be returned.
                    formatted.push(tweet.user[i].name);
                };
            };        
        };
        return formatted; //Return the array.
    };
});

最后，如果您想测试，here are a fully function jsfiddle 使用您自己的代码。 :)

Answer 3

Query 是您的字符串并过滤我的查询，例如 json 列表中存在的名称
ng-repeat="推文中的推文" |过滤器：{用户：查询}