javascript - AngularJS - ng-model 不适用于 Bootstrap 指令

Question

我正在为我的元素使用 AngularJS，我是新手。但我喜欢它的功能，也非常方便开发。但是我想出了以下问题，不知道要摆脱它。

我有一个多 View 应用程序。以下代码是注册 View 的一部分。按下注册按钮时会显示此 View 。现在的问题是，在下面的第 4 行和第 5 行中，我附加了一个 ng-model 属性，并且我能够打印使用 {{num}} 指令获得的数字。但是，下面的 ng-model num2 没有像上面那样显示。我得到的只是显示的静态文本 {{num2}}。为什么它不像以前那样工作？

<form role='form' action='#/app/register_db' method='post'>
    <h1><small><b>Sign Up Information<b></small></h1>
    <br>
    <input type='text' ng-model='num'>
    <h1>{{num}}</h1>
    <div class='row'>
        <input type='text' ng-model='num2'>
        <h1>{{num2}}</h1>
        <div class='col-xs-5'>
            <input type="text" class='form-control' id="fn" name='firstname' ng-model='ng-firstname' placeholder="First Name">
        </div>
    </div>
...
...

我是 AngularJS 的新手，我很快就能掌握概念。因此，如果我遗漏了什么，请指导我走正确的道路并帮助我解决这个问题。

我正在使用 angularJS 和 Bootstrap CSS。

谢谢。

Answer 1

您应该在浏览器的控制台中收到以下错误消息:

[ngModel:nonassign] Expression 'ng-firstname' is non-assignable. Element: <input type="text" class="form-control" id="fn" name="firstname" ng-model="ng-firstname" placeholder="First Name">

作为ng-model="ng-firstname"不是按名称引用，而是 AngularJS 将尝试计算的表达式，因此只需不使用破折号即可解决该问题。当你破坏代码时会发生什么，AngularJS 基本上停止了，而 AngularJS 通常会在后面的元素中做的任何其他事情都不会发生。