Angular - 获取 $scope 中某个键的值
Angular - getting value of certain key in $scope
我正在尝试使用 Meteor/Angular/TypeScript/mongoDB 创建一个简单的应用程序。计划是根据来自数据库的数据绘制图表。它看起来像这样:
export const Database = new Mongo.Collection('servers');
var app = angular.module('monitor', [
'chart.js',
'angular-meteor',
'ui.router'
]);
app.config(['$stateProvider', '$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/login');
$stateProvider
.state('login', {
url: '/login',
templateUrl: 'client/login.html',
controller: 'loginCtrl'
})
.state('register', {
url: '/register',
templateUrl: 'client/register.html',
controller: 'registerCtrl'
})
.state('monitor', {
url: '/monitor',
templateUrl: 'client/monitor.html',
requireLogin: true,
controller: 'monitorCtrl'
});
}]);
创建用户、登录、重定向到正确的页面等工作正常,所以我将省略这些部分。现在我正在尝试为我的数据库集合中的每个对象创建 canvas。
app.controller('monitorCtrl', ['$scope', '$meteor',
function($scope, $meteor) {
$scope.servers = $meteor.collection(Database);
angular.forEach($scope.servers, function(value, key) {
var canvas = document.createElement('canvas');
canvas.setAttribute('id', $scope.servers['hostname']);
canvas.setAttribute('width', '350');
canvas.setAttribute('height', '250');
canvas.setAttribute('style', 'border:1px solid #000000');
document.getElementById('test').appendChild(canvas);
})
}]);
到目前为止一切顺利。与我的数据库的连接正在工作。当我在 HTML 站点上显示 {{ servers }} 时,我得到了我期望的结果。具有一堆 key/value 对的对象数组。看起来像这样:
[{"hostname":"debian",
"ip":"127.0.0.1",
"latency":18.843,
"totalmemory":4156395520,
"usedmemory":1982562304,
"_id":{"_str":"590c2e0332f6128b9300a25f"}},
{"hostname":"dummy1",
"ip":"127.0.0.2",
"latency":"30.000",
"totalmemory":"8392102837",
"usedmemory":"3938462793",
"_id":{"_str":"591558e2155d4e3702f89a05"}},
{"hostname":"dummy2",
"ip":"127.0.0.3",
"latency":"12.000",
"totalmemory":"4873615238",
"usedmemory":"1835263846",
"_id":{"_str":"59155948155d4e3702f89a06"}}]
canvas 也已创建,但我不知道如何访问这些对象中某个键的值。 canvas 的 ID 是 "undefined"。但是我试图让它们成为每个对象的 'hostname' 的值。我怎么做?我阅读了一些有关相关问题的主题,但在我看来,我在这里缺少一些简单的基础知识。
传递给函数的 value 是保存您正在迭代的大数组的当前元素的变量,因此在每次迭代时,它会更改为指向一个该数组的元素。
试试这个:
angular.forEach($scope.servers, function(value, key) {
var canvas = document.createElement('canvas');
canvas.setAttribute('id', value.hostname);
canvas.setAttribute('width', '350');
canvas.setAttribute('height', '250');
canvas.setAttribute('style', 'border:1px solid #000000');
document.getElementById('test').appendChild(canvas);
})
我正在尝试使用 Meteor/Angular/TypeScript/mongoDB 创建一个简单的应用程序。计划是根据来自数据库的数据绘制图表。它看起来像这样:
export const Database = new Mongo.Collection('servers');
var app = angular.module('monitor', [
'chart.js',
'angular-meteor',
'ui.router'
]);
app.config(['$stateProvider', '$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/login');
$stateProvider
.state('login', {
url: '/login',
templateUrl: 'client/login.html',
controller: 'loginCtrl'
})
.state('register', {
url: '/register',
templateUrl: 'client/register.html',
controller: 'registerCtrl'
})
.state('monitor', {
url: '/monitor',
templateUrl: 'client/monitor.html',
requireLogin: true,
controller: 'monitorCtrl'
});
}]);
创建用户、登录、重定向到正确的页面等工作正常,所以我将省略这些部分。现在我正在尝试为我的数据库集合中的每个对象创建 canvas。
app.controller('monitorCtrl', ['$scope', '$meteor',
function($scope, $meteor) {
$scope.servers = $meteor.collection(Database);
angular.forEach($scope.servers, function(value, key) {
var canvas = document.createElement('canvas');
canvas.setAttribute('id', $scope.servers['hostname']);
canvas.setAttribute('width', '350');
canvas.setAttribute('height', '250');
canvas.setAttribute('style', 'border:1px solid #000000');
document.getElementById('test').appendChild(canvas);
})
}]);
到目前为止一切顺利。与我的数据库的连接正在工作。当我在 HTML 站点上显示 {{ servers }} 时,我得到了我期望的结果。具有一堆 key/value 对的对象数组。看起来像这样:
[{"hostname":"debian",
"ip":"127.0.0.1",
"latency":18.843,
"totalmemory":4156395520,
"usedmemory":1982562304,
"_id":{"_str":"590c2e0332f6128b9300a25f"}},
{"hostname":"dummy1",
"ip":"127.0.0.2",
"latency":"30.000",
"totalmemory":"8392102837",
"usedmemory":"3938462793",
"_id":{"_str":"591558e2155d4e3702f89a05"}},
{"hostname":"dummy2",
"ip":"127.0.0.3",
"latency":"12.000",
"totalmemory":"4873615238",
"usedmemory":"1835263846",
"_id":{"_str":"59155948155d4e3702f89a06"}}]
canvas 也已创建,但我不知道如何访问这些对象中某个键的值。 canvas 的 ID 是 "undefined"。但是我试图让它们成为每个对象的 'hostname' 的值。我怎么做?我阅读了一些有关相关问题的主题,但在我看来,我在这里缺少一些简单的基础知识。
传递给函数的 value 是保存您正在迭代的大数组的当前元素的变量,因此在每次迭代时,它会更改为指向一个该数组的元素。
试试这个:
angular.forEach($scope.servers, function(value, key) {
var canvas = document.createElement('canvas');
canvas.setAttribute('id', value.hostname);
canvas.setAttribute('width', '350');
canvas.setAttribute('height', '250');
canvas.setAttribute('style', 'border:1px solid #000000');
document.getElementById('test').appendChild(canvas);
})