jquery - 将对象值连接到 html 模板中的字符串变量

Question

我在使用 ng 指令时陷入了困境。我将两个参数传递给 mouseoverOnStep 函数，第一个是对象值本身，第二个是元素的选择器。我有以下 HTML 代码

<li ng-mouseover="mouseoverOnStep(Color.color_value, '.mask-second-{{Color.id}}');" ng-repeat="Color in select.Color">&nbsp;</li>

检查元素时我得到的输出。这是

<li ng-repeat="Color in select.Color" ng-mouseover="mouseoverOnStep(Color.color_value, '.mask-second-');" class="ng-scope">&nbsp;</li>

与

Error: [$parse:syntax] 

为什么我没有在 DOM 中获取 {{Color.id}} 的值？ 我期待类似的事情。

ng-mouseover="mouseoverOnStep(Color.color_value, '.mask-second-12');"
ng-mouseover="mouseoverOnStep(Color.color_value, '.mask-second-13');"

如有任何帮助，我们将不胜感激。

Answer 1

这已经是一个 Angular 表达式:

ng-mouseover="mouseoverOnStep(Color.color_value, '.mask-second-{{Color.id}}');"

将 {{ }} 放入 JavaScript 中无效。

您有 2 个选择:

ng-mouseover="mouseoverOnStep(Color.color_value, '.mask-second-'+ Color.id);"

这不会评估并显示 Color.id 的值，为什么要这样做？它与用 JavaScript 编写此函数相同:

函数 showMeId(值) { 控制台.log(值); }

showMeId('.mask-second-' + Color.id);//在 javascript 中你永远不会看到它被求值。

-- 或 --

ng-mouseover="mouseoverOnStep(Color);"

您的mouseoverOnStep:

function mouseoverOnStep(color) {
    var cssClass = '.mask-second-' + Color.id;
}

我认为您对什么是 JavaScript、什么是 HTML 以及评估什么感到困惑。