Question

嗨，我正在制作一个教程项目，第一部分我正在尝试制作一个接受书籍ISBN编号的表格，然后在互联网上查询它的价格。

作为初学者，我制作了一系列书籍作为样本数据，一个用于显示它们的表格和一个用于接受ISBN的表格。

在这个阶段，我只想将ISBN添加到现有阵列中，但这不起作用。当我提交表单时，数据不会添加到表中，但会添加一个空表行。所以有些事情正在发生但不知何故不正确

我的appfile

(function() {
var app = angular.module('booksApp', []);

app.controller('BooksController', function() {
    this.queryResults = results;

    });

app.controller('QueryController', function() {
     this.queryBook = function(){
         this.val = this.isbn;
         results.push([{ISBN: }]);
         this.isbn = '';
    };
    });


var results = [
        {
            name: 'book 1',
            ISBN: 1234,
            price: 13.4
        },
        {
            name: 'book 2',
            ISBN: 1234234,
            price: 32.8
        }
    ];


})();

我的html文件

<body ng-controller="BooksController as books">
    <form ng-controller="QueryController as qry" ng-submit="qry.queryBook()">
        Please enter ISBN number to be queried:
        <input type="text" ng-model="qry.isbn" />
        <input type="submit" value="query" /> <br />
        The queried value is {{qry.val}} 
    </form>

    <table class="table">
        <thead>
            <tr>
                <td>ISBN</td>
                <td>Book Name</td>
                <td>Shop</td>
                <td>Stock</td>
                <td>Price</td>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="result in books.queryResults">
                <td>{{result.ISBN}}</td>
                <td>{{result.name}}</td>
                <td>{{result.shop}}</td>
                <td>{{result.stock}}</td>
                <td>{{result.price | currency}}</td>
            </tr>
        </tbody>
    </table>
    <script src="js/angular.js" type="text/javascript"></script>
    <script src="booksApp.js" type="text/javascript"></script>
</body>

Answer 1

而不是results.push([{ISBN: }]);您需要执行：results.push({ISBN: });，因为您需要推送新对象，而results.push([{ISBN: }]);推送新数组包含一个元素。

Answer 2

Rasalom的解决方案基本上是正确的，但原因不包括在内。

在您的HTML中，您正在使用以下内容访问结果值以供显示。

        <tr ng-repeat="result in books.queryResults">
            <td>{{result.ISBN}}</td>
            <td>{{result.name}}</td>
            <td>{{result.shop}}</td>
            <td>{{result.stock}}</td>
            <td>{{result.price | currency}}</td>
        </tr>

因此，您希望数组queryResults中的每个元素都是对象。这些对象中的每一个都应具有属性ISBN name shop stock price。

向结果添加新值时，请使用

results.push([{ISBN: this.val }]);

因此，您正在将数组推送到结果中。该数组有一个元素，一个属性为ISBN的对象。

这会导致问题，因为您希望queryResults中的每个元素都是一个对象。

当ng-repeat到达作为数组的元素时，所有预期的属性都是未定义的。使用角度时，似乎尝试使用{{}}插入未定义的值将不会显示任何值。

请参阅小提琴：http://jsfiddle.net/gabs00/e5jo7sf3/2/

总结：

您正在将错误格式化的数据添加到结果数组中。由于您未以预期格式传递数据，因此未打印这些值。您的代码正在检查数组上的属性，即尚未定义的属性。

results.push({ISBN:this.val});

按预期添加queryResults一个对象，至少包含一个预期属性。

Angular array.push（）返回空对象

2 个答案: