ng重复项仅在单击分页后显示

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

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

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

在需要pcap模块后，我们将数据包保存到我们的集合中，该集合名为packages，此代码也在/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。我们还想添加一个搜索，它在表的EVERY列中进行搜索。分页也是以实验的方式添加的。

在我们的模块文件夹/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);
});

如果我猜对了，根据Packet.query()-Codeline，ng重复代码，比如我们的/public/modules/network/views/network.client.view.html中的代码，必须是这样的，还是这样？：

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

我们已经发现，如果按项目跟踪_id被添加到上述代码的表行元素中，如果按..跟踪，则搜索无法完全工作(我们无法过滤一个点"."？)

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

第一：为什么只有当我们点击另一个页码时，表格才会显示结果？(页码本身不断刷新)

第二：我们如何像我们的表一样在同一页上显示d3.js图形？我们已经用CCD_ 2安装了d3和nvd3config/env/all.js中的依赖项，如">'public/lib/d3.d3.min.js'"或">'public/lib/d3.d3.js'3'和'nvd3'添加到我们的应用程序ModuleVendorDependencies中，但它总是返回错误：

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

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

未知提供程序<-d3<-d3Bars供应商

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

首先，根据ng-repeat文档：

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

因此您的表达式变为：

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

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

直接使用D3，无需注射
像这样注入$window：function ($window) { var d3 = $window.d3; }
自己提供，如：angular.module('yourApp').constant('d3', d3);

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

相关内容

最新更新

热门标签：