是否可以使用作用域变量访问html中的数组？

Question

我有一个要在模板文件中使用的Json数组，但要访问该数组的某些元素，我需要使用范围变量。我可以在控制器中做类似的事情，但我需要在html文件中做。

我的数组的一部分如下所示：

{
fitbit: {
    selected: true,
    user_id: "10537",
    today: [
        {
            date: "Tue, 10 Jan 2017",
            distance: 0,
            steps: 0,
            calories: "0"
        }
    ],
    week: {
        distance: [
            ["0","0","0","0","0"]
        ],
        labels: ["Wed 4th","Thu 5th","Fri 6th","Sat 7th","Sun 8th"],
        steps: [
            ["0","0","0","0","0"]
        ]
    }
},
jawbone: { ... }
}

我有一个作用域变量$scope.currentDevice，它会根据用户选择的选项而改变，比如fitbit，jawbone等等。在控制器中，我可以使用$scope.wearables[currentDevice]['week']['distance']控制要访问的数据，这样它就可以使用变量currentDevice来获取正确的数据。

我需要访问模板html文件中的wearables[currentDevice]['week']['distance']，但不使用ng-repeat，并且需要使用作用域变量currentDevice来决定显示哪些数据。

每当我在html文件中尝试{{wearables[currentDevice]['week']['distance']}}时，它什么也不显示，但是如果我尝试{{wearables['fitbit']['week']['distance']}}，它会显示值。

可以用这种方式显示数组数据吗?如果可以，我该如何做？

我想要显示的数组数据需要显示在如下图所示的图表数据更改位置

<canvas id="bar" class="chart chart-bar" chart-data="wearables[currentDevice]['week']['distance']" chart-labels="labels" chart-series="series" chart-options="options" ></canvas>

如果我将其更改为

<canvas id="bar" class="chart chart-bar" chart-data="wearables['fitbit']['week']['distance']" chart-labels="labels" chart-series="series" chart-options="options" ></canvas> 

它工作正常

Answer 1

为了在图表中显示正确的数据，我使用了一个函数。我使用getDistance(currentDevice)返回正确的数据，而不是尝试使用wearables[currentDevice]['week']['distance']显示数据

图形代码变为：

<canvas id="bar" class="chart chart-bar" chart-data="getDistance(currentDevice)" chart-labels="labels" chart-series="series" chart-options="options" ></canvas>

在控制器中，getDistance(设备)方法是根据$scope.currentDevice的内容更改数据的位置：

$scope.getDistance = function(device) {
    console.log('current device', device );
    return $scope.wearables[device]['week']['distance'];
}

Answer 2

根据图表的实际驱动因素，可能没有正确计算chart-data属性。尝试将chart-data更改为ng-attr-chart-data，看看是否有效：

<canvas id="bar" class="chart chart-bar" ng-attr-chart-data="wearables[currentDevice]['week']['distance']" chart-labels="labels" chart-series="series" chart-options="options" ></canvas>

有关ngAttr的信息：https://docs.angularjs.org/guide/interpolation