<div ng-repeat="(key,x) in selectedPoll.questions">
<p>{{x}}</p>
<p>{{key}}</p>
<canvas chart-directive data="arrayResult.{{key}}" id="{{ $index }}">
</canvas>
</div>
当我在图表指令的全局范围内使用 {{key}} 时,{{ $index}} 不可访问,尽管当我删除 {{key}} 并只留下 arrayResult 时,ng-repeat 正在工作。
说明:我使用 id {{ $index }} 由 chart-directive 搜索 ng-repeat 中的每个 x,因此我可以根据需要创建尽可能多的 chart-directives。
然后为了一切正常工作,我必须传递正确的数据集,图表指令的每个数据集都与 ng-repeat 中 x 的 {{ key }} 具有相同的结尾,例如:
data="arrayResult.q1 "
为了使其动态化,我想将其切换为:
data="arrayResult.{{ key }}
但是当我添加 {{ key }} ng-repeat stop 并得到一个结果时,我认为这是因为它无法读取 {{ $index }} 的 id 值
这是我第一次在 ng-repeat 中使用 key 和 $index,也是我第一次重复自定义指令,所以我不知道问题是重复自定义指令还是错误使用 { { 键 }} 值。
就在我添加问题时,我想到了一些解决方案,这可能是因为在我的自定义指令中我的 scope.data 看起来像这样
scope: {
data:'='
},
所以如果我是对的,如果有人可以告诉我这是否可能,以及如何使范围数据开放以供像这样的表达式“arrayResult.{{ key }} ??
最佳答案
仅当您的图表数据是字符串时,使用 @
才有意义。
您可以保留指令的 =
,但您需要更改:
data="arrayResult.{{key}}"
进入这个:
data="arrayResult[key]"
大括号确实只适用于 @
范围,但您会得到字符串 "arrayResult.q1"
而不是 arrayResult 中的实际值.q1,所以 =
是要走的路。
请参阅下面的模拟片段:
angular.module("test", []).controller("test", function($scope) {
$scope.questions = {q1: "do you like apples?", q2: "do you like bananas?"};
$scope.arrayResult = {q1: true, q2: false};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="test" ng-controller="test">
<div ng-repeat="(key,x) in questions">
<p>question: {{x}}</p>
<p>key: {{key}}</p>
<div>result: {{arrayResult[key]}}</div>
</canvas>
</div>
</div>
关于javascript - ng-repeat ="(key, value)"不能将 {{key}} 的值用作另一个指令的全局范围的一部分,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28590623/