AngularJS-ng-model無法與bootstrap指令一起使用

Question

我正在為我的項目使用AngularJS，所以我是新手。 但是我喜歡它的功能，並且非常方便開發。 但是我想到了以下問題，卻不知道該如何解決。

我有一個多視圖應用程序。 以下代碼是注冊視圖的一部分。 按下注冊按鈕后，將顯示此視圖。 現在的問題是，在下面的第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在隨后的元素中通常會執行的其他任何操作，根本不會發生。