2014-12-10 6 views
0

привет. Я работаю над учебным проектом, для первой части я пытаюсь сделать форму, которая примет номер ISBN книги, а затем запросит его цену в Интернете.Угловой массив.push() возвращает пустой объект

В качестве стартера я сделал массив книг как образцы данных, таблицу для их отображения и форму для приема 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> 

ответ

1

Вместо results.push([{ISBN: }]); вам нужно сделать: results.push({ISBN: }); потому, что вам нужно нажать новый объект, и results.push([{ISBN: }]); нажал новый массив с одним элементом.

+0

Стоит упомянуть, что '.push ([{ISBN:}]);' дает синтаксическую ошибку. :) –

+0

oh, и это тоже должно быть: '.push ({ISBN: this.val});' – Rasalom

+0

Я использовал .push ({ISBN: this.val}); Спасибо большое .. :) – Patriot

0

Решение 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 объекта, как и ожидалось, по крайней мере, 1 из ожидаемых свойств.

Смежные вопросы