Javascript AngularJs表单不显示推送到列表中的表单数据

我制作了一个简单的AnguarJS应用程序，包含表单和书籍列表。在图书列表中，我有一个表单，我可以在其中键入有关图书的信息并提交，我的图书列表应该会更改。我想做这样的东西：

但当我在表单中添加信息时，我并没有在图书列表中看到添加的信息，只有空字段。我不想向服务器发送信息，我只想在网页上看到添加的信息。我使用的文件如下：

app.js

var module = angular.module("sampleApp", ['ngRoute']);
module.config(function ($interpolateProvider) {
    $interpolateProvider.startSymbol('[[').endSymbol(']]');
})
module.config(['$routeProvider',
    function($routeProvider) {
        $routeProvider.
            when('/route1', {
                templateUrl: 'static/myapp/html/test1.html',
                controller: 'RouteController1'
            }).
            when('/route2', {
                templateUrl: 'static/myapp/html/test2.html',
                controller: 'BookController'
            }).
            otherwise({
                redirectTo: '/'
            });
    }]);
module.controller('BookController', ['$scope', function($scope) {
$scope.books = [
{
    title: 'test',
    author: 'test',


}
];
$scope.addMe = function (title, author) { 
    $scope.books.push({title: title, author: author});
}

}]);

test2.html

<div class="container">
<div ng-controller="BookController" >
    <ul>
        <li ng-repeat = "book in books">
            Title:<p>[[book.title]] </p>
            Author: <p>[[book.author]] </p>     

        </li>    
    </ul>

    <input type="text"  placeholder = 'title'/>
    <input type="text" placeholder = 'author'/>
    <button ng-click="addMe(title,author)">Add</button>

</div>

</div>

书名：[[book.Title]]

作者：[[book.Author]]



添加

填写表格后，我得到下一个结果：

---

它不起作用，因为您没有设置变量。 您可以在

addMe

中添加title和author，但如果您

console.log

这些变量，它会显示

未定义的

您可以使用$scope。您可以将其视为控制器和视图之间的桥梁。因此，在您的视图中，当您设置标题和作者并单击

addMe

，您将在控制器中的

$scope.title

和

scope.author

在视图中

添加

在books声明之后的控制器中：

$scope.title=''；
$scope.author=''；

在

addMe中

---

$scope.books.push（{title:$scope.title，author:$scope.author}）

尝试将

$scope.books

设置为一个新数组，而不是按它。js通过比较引用来检查哪些变量已更改。由于变量

book

保持设置为同一数组，angular的脏检查功能可能检测不到新元素

把它改成这样

$scope.books=$scope.books.concat（[{title:title，author:author}]）；

---

这应该是可行的，因为concat返回一个新数组，而不是更新旧数组。

为什么要两次添加控制器（1：在路由上和2.内联）？你的文本框绑定在哪里？@Venkat我添加了两个控制器，因为我有一个index.html，其中有指向test1.html（controller 1）和test2.html（controller 2）的链接。谢谢你的回答，这很有帮助，一切正常！但是为什么我应该在books声明之后编写

$scope.title='

，而不是

$scope.books.title='

？因为您使用

$scope.title

和

$scope.author

作为临时变量$scope.books.title不起作用，因为它是一个数组。在我的例子中，我应该将每个元素推到数组的末尾，但如果我理解正确，concat（）方法只能连接两个数组。