javascript - Angular - 获取$scope中某个键的值

Question

我正在尝试使用 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}} 时，我得到了我所期望的结果。具有一堆键/值对的对象数组。看起来像这样:

[{"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 是“未定义”的。但我试图让它们成为每个对象的“主机名”值。我怎么做？我阅读了一些有关相关问题的主题，但在我看来，我在这里缺少一些简单的基础知识。

Answer 1

传递给函数的值是保存您正在迭代的大数组的当前元素的变量，因此在每次迭代时，它都会更改为指向该数组的元素。

试试这个:

 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);
})