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

Question

我有一个复选框输入，它根据变量trueVal动态设置"true"值，这是一个字符串。

<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"
};

如果选中第二个框。

Answer 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" 。

Answer 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 提交到数据库。