用单引号传递动态值作为NG-真值前pression失败 [英] Passing dynamic value with single quote as a ng-true-value expression fails

问题描述

我有我的复选框，输入，设置动态地基于一个变量的真实价值 trueVal ，这是一个字符串。

I have my checkbox input that sets the "true" value dynamically based on a variable trueVal, which is a string.

<input ng-model="foo" ng-true-value="'{{trueVal}}'">

例如，对于 trueVal =东西，富===东西当复选框检查。

For example, for trueVal = "something", foo === "something" when the checkbox is checked.

这工作的情况除外，当 trueVal 等于在它一个单引号的字符串：客户不明白。在这种情况下，有一个错误：

This works except in the case when trueVal equals to a string with a single quote in it: Customer didn't understand. In this case, there is an error:

错误：[$解析：lexerr]词法错误：在前在pression [客户不理解']列27-28 []'未终止的报价

Error: [$parse:lexerr] Lexer Error: Unterminated quote at columns 27-28 ['] in expression ['Customer didn't understand'].

我不能剥夺单引号，因为该字符串应该设置为，是富。

I can't strip the single quotes because the string should be set as-is to foo.

更广阔的背景：

我要创建基于的选项列表，我从后台得到一组复选框：

I'm creating a group of checkboxes based on a list of options that I get from the back-end:

<div ng-repeat="(key,option) in options">
  <input type="checkbox" 
         ng-model="foo[key]"
         ng-true-value="'{{option.trueVal}}'"
         ng-false-value="null">
</div>

因此​​，考虑到：

So, given:

options =  {
             0: {trueVal: "Customer was late"},
             1: {trueVal: "Customer didn't understand"}
           };

我希望看到：

foo = {
  1: "Customer didn't understand"
};

如果第二个框被选中。

推荐答案

短版， NG-真正-VAL 期望一个常数，正在通过了以下前pression作为参数：客户不理解进行评估，这是因为畸形无终端单引号

The short version, ng-true-val expects a constant and is being passed the following expression as a parameter: 'Customer didn't understand' for evaluation, which is malformed because of un-terminated single quote.

简单（但有点丑陋）的方法是替换 与 \\ 在View（此不改变实际值 - 只要连接codeS吧）

The simple (but somewhat ugly) approach would be to replace ' with \' in the View (this doesn't change the actual value - just encodes it):

<input type="checkbox" ng-model="foo"
       ng-true-value="'{{trueVal.replace('\'', '\\\'')}}'"
       ng-false-value="null">

更好的方法是可能使用 NG-变化：

The better approach is probably using ng-change:

<input type="checkbox" ng-model="t"
       ng-change="foo = t ? trueVal : null">

加长版

在幕后 NG-真值通话 $解析服务： VAR parseFn = $解析（如pression），并期望 parseFn.constant ===真正。如果EX pression是一个常数，后者是唯一真正的：

Under the covers ng-true-value calls $parse service: var parseFn = $parse(expression), and expects parseFn.constant === true. The latter is only true if the expression is a constant:

expression = 'string';      // string literal
expression = '5'            // number literal
expression = {v: 'string'}  // object literal with a constant
expression = 'foo' + 'bar'; // expression that evaluates to a constant

在你的情况，你需要采取的变量 trueVal ，它插一个值 {{trueVal}} ，成为前pression的一部分'{{trueVal}} 最终将如上所述进行评估。

In your case you need to take the variable trueVal, interpolate it to a value {{trueVal}}, to become part of an expression '{{trueVal}}' that ultimately will be evaluated as explained above.

这也是为什么替换 工程 \\ ，因为它避开了单打的报价，如果您有写的前pression直接：

This is why substitution of ' works to \', because it escapes the singles quotes as if you have written the expression directly:

ng-true-value="'Customer didn\'t understand'"

如果你确信你不会有双引号（），在值选项，你也可以简单地逆转行情的秩序，而不需要做替换：

If you are certain that you won't have double quotes (") in your values for options, you could also simply reverse the order of quotes without the need to do replace:

ng-true-value='"{{trueVal}}"`

这当然会，失败出于同样的原因，如果 trueVal 值有双引号：用引号的东西。

This will, of course, fail for the same reason if trueVal value had double quotes: something with "quotes".

这篇关于用单引号传递动态值作为NG-真值前pression失败的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！