将带有单引号的动态值作为 ng-true-value 表达式传递失败答案

【问题标题】：Passing dynamic value with single quote as a ng-true-value expression fails将带有单引号的动态值作为 ng-true-value 表达式传递失败
【发布时间】：2015-05-14 10:41:27
【问题描述】：

我的复选框输入根据变量trueVal（一个字符串）动态设置“真”值。

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

例如，对于trueVal = "something"，选中复选框时为foo === "something"。

这有效，除非trueVal 等于其中包含单引号的字符串：Customer didn't understand。在这种情况下，有一个错误：

错误：[$parse:lexerr] 词法分析器错误：表达式 ['客户不理解'] 中第 27-28 列 ['] 处的未终止引号。

我不能去掉单引号，因为字符串应该按原样设置为foo。

更广泛的背景：

我正在根据从后端获得的options 列表创建一组复选框：

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

所以，给定：

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

我希望看到：

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

如果第二个框被选中。

【问题讨论】：

标签： angularjs

【解决方案1】：

短版，ng-true-val 需要一个常量，并作为参数传递以下表达式：'Customer didn't understand' 用于评估，由于未终止的单引号导致格式错误。

简单（但有些丑陋）的方法是在视图中将 ' 替换为 \'（这不会改变实际值 - 只是对其进行编码）：

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

更好的方法可能是使用ng-change：

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

加长版

在后台ng-true-value 调用$parse 服务：var parseFn = $parse(expression)，并期待parseFn.constant === true。后者仅在表达式为常量时为真：

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}}，以成为表达式 '{{trueVal}}' 的一部分，最终将按上述说明进行评估。

这就是为什么 ' 替换为 \' 起作用的原因，因为它转义了单引号，就好像你直接写了表达式一样：

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

如果您确定options 的值中没有双引号 (")，您也可以简单地颠倒引号的顺序，而无需执行 replace：

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

如果trueVal 值有双引号，这当然会因同样的原因失败：something with "quotes"。

【讨论】：

再次感谢您的全面编辑和回答。我采取了第一种方法。另外，我希望我能吸收你的力量。

【解决方案2】：

试试这个。

在标记中

<input type="checkbox" ng-model="dummyModel" ng-model-options="{getterSetter: true}">

在控制器中

var trueValue = "my true' value";
var falseValue = false;
var _model;
$scope.dummyModel = function (val) {
    if (angular.isDefined(val)) {
        _model = val ? trueValue : falseValue
    }
    return _model === trueValue;
}

使用_model提交到数据库。

【讨论】：