ng-只在分页后显示重复项。

Question

我是Javascript-Mean堆栈的新手，我想和我的朋友一起实施一个项目。我们目前正在开发一个网络嗅探器，它应该实现d3.js。我们要用图形绘制网络流量。该应用程序还使用了来自npm的pcap-模块。我们还使用MongoDB作为数据库，整个应用程序的结构都是用酵母生成器(生成器-> http://meanjs.org/generator.html)设计的。(我目前正在用德语进行开发，所以请不要怀疑变量名是否奇怪！)

目前，通过为数据包创建会话，我们可以将数据包保存到数据库中。代码可在/server.js中获得。

pcap = require('pcap'),
pcap_session = pcap.createSession('en1', 'ip');

在需要pcap模块之后，我们将这些数据包保存到我们的集合中，名为“也是数据包”，该代码也在/server.js中。

mongoose.createConnection('mongodb://localhost/scream-dev');

var packetSchema = new mongoose.Schema({
    any: mongoose.Schema.Types.Mixed
});
var Pakete = mongoose.model('packets', packetSchema);

pcap_session.on('packet', function (raw_packet) {
    var packet_ip = pcap.decode.packet(raw_packet);

    var paket = new Pakete({
        any: packet
    });

    paket.save(function (err, paket) {
        if (err) return console.error(err);
        //console.log('Saved a IP Packet!');
    });
    //console.log(packet_ip);
});

现在一切都很好，如果我们看看我们的包收集，我会发现(经过足够的时间，一些！)使用此方案的数据集：

{
    "_id" : ObjectId("5534c9c538ebe8617b5ae35c"),
    "any" : {
        "link_type" : "LINKTYPE_ETHERNET",
        "pcap_header" : {
            "tv_sec" : 1429522885,
            "tv_usec" : 846102,
            "caplen" : 145,
            "len" : 145
        },
        "payload" : {
            "dhost" : {
                "addr" : [ 
                    104, 
                    168, 
                    109, 
                    69, 
                    154, 
                    194
                ]
            },
            "shost" : {
                "addr" : [ 
                    164, 
                    147, 
                    76, 
                    194, 
                    149, 
                    78
                ]
            },
            "ethertype" : 2048,
            "vlan" : null,
            "payload" : {
                "version" : 4,
                "header_length" : 5,
                "header_bytes" : 20,
                "diffserv" : 0,
                "total_length" : 131,
                "identification" : 10167,
                "flags" : {
                    "reserved" : 0,
                    "df" : 0,
                    "mf" : 0
                },
                "fragment_offset" : 0,
                "ttl" : 51,
                "protocol" : 6,
                "header_checksum" : 56601,
                "saddr" : {
                    "o1" : 173,
                    "o2" : 194,
                    "o3" : 122,
                    "o4" : 22
                },
                "daddr" : {
                    "o1" : 192,
                    "o2" : 168,
                    "o3" : 154,
                    "o4" : 35
                },
                "protocol_name" : null,
                "payload" : {
                    "sport" : 443,
                    "dport" : 51541,
                    "seqno" : 4050575809,
                    "ackno" : 3439177583,
                    "data_offset" : 8,
                    "header_bytes" : 32,
                    "reserved" : 0,
                    "flags" : {
                        "cwr" : 0,
                        "ece" : 0,
                        "urg" : 0,
                        "ack" : 1,
                        "psh" : 1,
                        "rst" : 0,
                        "syn" : 0,
                        "fin" : 0
                    },
                    "window_size" : 1653,
                    "checksum" : 55427,
                    "urgent_pointer" : 0,
                    "options" : {
                        "mss" : null,
                        "window_scale" : null,
                        "sack_ok" : null,
                        "sack" : null,
                        "timestamp" : 973486614,
                        "echo" : 1190534572
                    },
                    "data" : { "$binary" : "FwMDAEoAAAAAAAABDDepuDqq89CSU3Qi2+AY8FFmXoNq4uSCD0e34q7nOEZVJ1+0RLj8JAEw30z5p8wEj    fBgaFzbgBWn3z9LA5CmySlNDg==", "$type" : "00" },
                    "data_bytes" : 79
                }
            }
        }
    },
    "__v" : 0
}

一切都很好。现在，我们想要向我们的前端添加数据包，首先是使用ng-repeat inside 。我们还想添加一个搜索，它在表的每个列中搜索。在实验中也加入了分页。

在我们的模块文件夹/public/modules/network (网络是我们自己的模块)中，/public/modules/network/controllers/network.client.controller.js是这样写的：

'use strict';
angular.module('network').factory('Packets', ['$resource',
 function ($resource) {
    return $resource('network/:packetId', {
        packetId: '@_id'
    }, {
        update: {
            method: 'PUT'
        }
    });
 }
]);

angular.module('network')
    .controller('NetworkController', ['$scope', '$stateParams', '$location', 'Authentication', 'Packets',
     function ($scope, $stateParams, $location, Authentication, Packets) {


            $scope.authentication = Authentication;

            $scope.packets = Packets.query();

            $scope.filteredTodos = [];
            $scope.currentPage = 1;
            $scope.numPerPage = 16;
            $scope.maxSize = 20;
            $scope.todos = [];
            $scope.todos = $scope.packets;

            $scope.$watch('currentPage + numPerPage', function () {
                var begin = (($scope.currentPage - 1) * $scope.numPerPage),
                    end = begin + $scope.numPerPage;

                $scope.filteredTodos = $scope.todos.slice(begin, end);
             });

如果我猜对了，ng-重复代码，就像在我们的/public/modules/network/views/network.client.view.html中那样，按照Packet.query() - Codeline的说法，应该是这样的，是吗？

<div data-ng-controller="NetworkController">
<div>
    <table class="table table-striped table-condensed table-hover">
        <thead>
            <tr>
                <th class="id" custom-sort order="'id'" sort="sort">Object Id&nbsp;</th>
                <th class="name" custom-sort order="'name'" sort="sort">saddr&nbsp;</th>
                <th class="description" custom-sort order="'description'" sort="sort">daddr&nbsp;</th>
                <th class="field3" custom-sort order="'field3'" sort="sort">protocol&nbsp;</th>
                <th class="field4" custom-sort order="'field4'" sort="sort">sport&nbsp;</th>
                <th class="field5" custom-sort order="'field5'" sort="sort">dport&nbsp;</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="item in filteredTodos track by item.id | filter:search">
                <td>{{item._id}}</td>
                <td>{{item.any.payload.payload.saddr.o1}}.{{item.any.payload.payload.saddr.o2}}.{{item.any.payload.payload.saddr.o3}}.{{item.any.payload.payload.saddr.o4}}</td>
                <td>{{item.any.payload.payload.daddr.o1}}.{{item.any.payload.payload.daddr.o2}}.{{item.any.payload.payload.daddr.o3}}.{{item.any.payload.payload.daddr.o4}}</td>
                <td>{{item.any.payload.payload.protocol_name}}</td>
                <td>{{item.any.payload.payload.payload.sport}}</td>
                <td>{{item.any.payload.payload.payload.dport}}</td>
            </tr>
        </tbody>
        <pagination ng-model="currentPage" total-items="todos.length" max-size="maxSize" boundary-links="true">
        </pagination>
        <br>
        <input type="text" ng-model="search.$" />
    </table>
</div>
</div>

我们已经发现，如果在上面代码的tablerow元素中添加了item._id的跟踪，那么搜索就不能完全工作，如果track by .离开了它的部分工作(我们不能过滤一个点“？)

不管怎样..。我们现在有两个问题：

首先:为什么我们单击另一个分页数时，该表只显示结果？(传真机本身就是不断更新的)

第二:如何像我们的表一样在同一个页面上显示d3.js图形？我们已经在"'public/lib/d3/d3.min.js'“或"'public/lib/d3/d3.js'".中安装了d3和nvd3，并在bower install --save中添加了依赖项。在/public/config.js中，我们还将'd3‘和'nvd3’添加到applicationModuleVendorDependencies中，但它总是返回一个错误：

错误：$injector:nomod模块“d3”不可用！您要么拼错了模块名，要么忘记加载它。如果注册一个模块，请确保将依赖项指定为第二个参数。

我们还尝试在控制器内使用一个指令，但随后它返回另一个错误：

未知提供者<- d3 <- d3BarsProvider

如果你能帮我处理任何代码或想法，那就太好了。我们已经在这个问题上工作了几个星期。

Answer 1

首先，根据文档

如果在表达式中使用筛选器，则应在跟踪表达式之前应用它们。

这样，你的表情就变成：

item in filteredTodos | filter:search track by item.id

其次，D3库在window上公开。它不是角质的一部分。你有三个选择：

1. 直接使用D3，不需注入。
2. 像这样注入$window：function ($window) { var d3 = $window.d3; }
3. 你自己提供吧，比如：angular.module('yourApp').constant('d3', d3);

我推荐#3，因为在单元测试中模拟比较容易。