javascript - AngularJS 是否错误地解析了值？

Question

我这里有一个非常简单的例子:http://jsfiddle.net/daylight/hqHSr/

要尝试一下，只需转到 fiddle 并单击 [添加项目] 按钮添加一些行。

接下来，单击任何项​​目旁边的复选框，您将看到类似于以下内容的内容:

问题:只显示数字部分 问题是该值应该显示行中显示的整个字符串。在示例中，这意味着它应该显示:86884-LLMUL。 请注意，它仅显示值的数字部分。

如果您查看控件，您会发现我正在使用 type="text"的输​​入。 此外，如果您查看模型 (simpleItem) 对象，您会发现它拥有的一个属性是一个字符串。 模型类的 JavaScript 如下所示:

  function simpleItem(id) {
        this.id = id;
    }

我尝试强制转换为字符串类型 当我生成每个 simpleItems 时，我什至在调用构造函数时将它们设置为一个字符(只是强制将 id 设置为字符串类型)。

下面是初始化每个 simpleItem id 的代码:

currentItem.id = getRandom(100000).toString() + "-" + getRandomLetters(5).toUpperCase();

您可以在 fiddle 中看到其余代码，但问题是我生成了一个随机值并将该值与一个连字符和 5 个字母连接在一起。这只是此示例的一小段愚蠢的代码。

但是现在，这是它变得非常奇怪的部分。 如果我只是将连字符 - 更改为另一个字符，如大写 X，每次单击复选框时都会出现错误。 这是更改后的代码和新输出，您可以在修改后的 fiddle 中看到:fiddle version 2

currentItem.id = getRandom(100000).toString() + "X" + getRandomLetters(5).toUpperCase();

此外，现在如果您在浏览器中打开 Dev Tools，您将在控制台中看到 Angular 现在会在您每次单击 [Add Item] 按钮时报告错误。看起来像:

添加单引号？修复？它 如果您转到 HTML 并从中更改以下行:

ng-init="itemId ={{l.id.toString()}}" 

对此

ng-init="itemId ='{{l.id.toString()}}'" 

现在，当您运行它时，错误将消失，您可以在此处更新的 fiddle 中看到它会正常工作:fiddle Version 3

Angular:将连字符转换为减号？ 你看，Angular 似乎将它转换为数字，试图对其进行数学运算(将连字符解析为减号)，然后 chop 字符串部分。当我使用连字符时，这一切似乎都有效，但当我使用 X 时，Angular 就会窒息。

这是添加单引号后的样子 - 当然，开发工具控制台中的 Angular 错误也会消失。

Angular 力到数值类型？ 为什么这会发生在 Angular 中？就好像它试图将我的字符串值强制为数字，即使 INPUT 元素是文本类型并且 JavaScript var 是字符串类型。 有人对此有想法吗？

星号(乘号)怎么样？

就在我完成此操作时，我想知道如果我将 - 更改为 * 并再次运行它会发生什么。这次我看到下面的错误，这表明某些东西正在尝试转换为数字。

Answer 1

这是预期的行为。 Angular 只是将范围内的文本插入到 ng-init 表达式 using scope.$eval 中。然后执行该表达式。这与其余周围上下文的 input 框的类型几乎没有关系。

绝对不希望 Angular 将它所做的任何插值包装在 quotes 中，它会破坏它在所有其他地方的使用，例如 class="my-class {{dynamic -类}}”。