Блог

Главная - Вопросы по программированию - HTML не отображается должным образом в AngularJS

HTML не отображается должным образом в AngularJS

#html #angularjs

#HTML #angularjs

Вопрос:

Я работаю с учебным пособием AngularJS по code school, мой код продолжает отображаться неправильно на моей веб-странице. Был бы признателен за любую помощь, пожалуйста. Вот мой index.html и app.js коды ниже:

для index.html:

 <!DOCTYPE html>
<html ng-app="store">
<head>
  <meta charset="utf-8" />
  <title>My Angular App</title>
  <link rel="stylesheet" type="text/css" href="bootstrap.min.css"/>
  <script type="text/javascript" src="angular.min.js"></script>
  <script type="text/javascript" src="app.js"></script>
</head>

<body ng-controller="StoreController as store">
  <div ng-repeat="product in store.products">
    <h1>{{product.name}}</h1>
    <h2>${{product.price}}</h2>
    <p>{{product.description}}</p>
    <button ng-show="store.product.canPurchase"> Add to Cart </button>
  </div>
</body>
</html>

Для app.js:

 (function() {
  var app = angular.module('store', []);
  app.controller('StoreController', function(this){
  this.products = gems;
});
var gems = [
  { name: 'Dodecahedron',
    price: 2.95,
    description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
    images: [
    {
      full: 'dodecahedron-01-full.jpg', 
      thumb: 'dodecahedron-01-thumb.jpg'
    }]
    canPurchase: false
    soldOut: false
  }, 
  {
    name: "Pentagonal Gem",
    price: 5.95,
    description: "..."
    canPurchase: true,
    soldOut: false
  }
  ];

})();

Ответ №1:

У вас есть 2 проблемы:

1) Вам не нужно указывать «this» в качестве параметра функции при создании контроллера:

 app.controller('StoreController', function(){
          this.products = gems;
});

2) множественные опечатки (пропущенные запятые) в ваших данных, из-за которых Javascript не выполняет синтаксический анализ. 

 var gems = [
  { name: 'Dodecahedron',
    price: 2.95,
    description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
    images: [
    {
      full: 'dodecahedron-01-full.jpg', 
      thumb: 'dodecahedron-01-thumb.jpg'
    }],
    canPurchase: false,
    soldOut: false
  }, 
  {
    name: "Pentagonal Gem",
    price: 5.95,
    description: "...",
    canPurchase: true,
    soldOut: false
  }
  ];

Комментарии:

1. Спасибо, Джефф :). очень признателен, но вы не указали, где у меня были опечатки 🙂

2. Вы можете просто скопировать то, что я написал, но конкретно внутри ваших объектов вам не хватает необходимых запятых. В первом, после ] в массиве изображений, «canPurchase: false». Во втором, после описания: «…»