无法让 angular.js 遍历数组和 post 到 html

Question

编辑：将 body 标签中的 ng-controller 更改为 ng-app，打字错误

我是 angular 的新手，我正在尝试使用 ng-repeat 来 post products[] 到 html 中的所有项目，但是 {{expressions}} 作为文本而不是计算出来。

我没有笔记本电脑，所以我在 phone 的 jsfiddle 和 w3school 编辑器上测试了所有这些。也许是编辑们？有时它们看起来不一致。我在 CodeAcademy 和 w3school 的教程中关注 'Shaping Up Angular'，但我不知道我做错了什么，这是代码：

<!DOCTYPE html>
<html>
<head>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>

<body ng-app="myStore">

  <div ng-controller="StoreController as store">

    <div ng-repeat="x in store.products">
      <h1>{{x.name}}</h1>
      <h2>${{x.price}}</h2>
      <p>{{x.description}}</p>
    </div>
  </div>

<script>
var app = angular.module('myStore', []);
app.controller('StoreController', function(){
   this.products = [
      {
       name: 'keyboard',
       price: 20.47,
       description: "well made from scratch",
       reviews: [
               {
           stars: 5,
           body: "great fantadtic worksmanship",
           author: "global@gmail.com"
               },
               {
           stars: 4,
           body: "amazing sale for the best",
           author: "insign@gmail.com"
               }
           ];
     },
     {
       name: "bed",
       price: 250.69,
       description: "sturdy contriction from panama",
       reviews: [
               {
           stars: 2,
           body: "could be better",
           author: "john@gmail.com"
               },
               {
           stars: 1,
           body: "shitty",
           author: "carmen@gmail.com"
               }
           ];
     } ];
 } );
 </script>

</body>  
</html>

Answer 1

您需要将 html 标签更改为 <html ng-app="myStore">，并将 <body ng-controller="myStore"> 更改为 <body>。这是因为 myStore 是 module，而不是 controller

更新

每个 reviews 数组中存在一些意外的分号

它适用于这个 plunker：http://plnkr.co/edit/5hnciX46Hb5wLwDn4R6K

Answer 2

您似乎有一些语法错误：

var app = angular.module('myStore', []);
  app.controller('StoreController', function(){
     this.products = [
        {
         name: 'keyboard',
         price: 20.47,
         description: "well made from scratch",
         reviews: [
                 {
             stars: 5,
             body: "great fantadtic worksmanship",
             author: "global@gmail.com"
                 },
                 {
             stars: 4,
             body: "amazing sale for the best",
             author: "insign@gmail.com"
                 }
             ]//remove this: ;
       },
       {
         name: "bed",
         price: 250.69,
         description: "sturdy contriction from panama",
         reviews: [
                 {
             stars: 2,
             body: "could be better",
             author: "john@gmail.com"
                 },
                 {
             stars: 1,
             body: "shitty",
             author: "carmen@gmail.com"
                 }
             ]//remove this;
       } ];
   } );

查看工作示例： http://plnkr.co/edit/a1f4i0ayEddwTHkBCzQ8?p=preview

Answer 3

其他人说的，你有一些语法错误。我从 this.products 中删除了分号，它显示得很好。

<!DOCTYPE html>
<html>
<head>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>

<body ng-app="myStore">

  <div ng-controller="StoreController as store">

    <div ng-repeat="x in store.products">
      <h1>{{x.name}}</h1>
      <h2>${{x.price}}</h2>
      <p>{{x.description}}</p>
    </div>
  </div>

<script>
var app = angular.module('myStore', []);
app.controller('StoreController', function(){
   this.products = [
      {
       name: 'keyboard',
       price: 20.47,
       description: "well made from scratch",
       reviews: [
               {
           stars: 5,
           body: "great fantadtic worksmanship",
           author: "global@gmail.com"
               },
               {
           stars: 4,
           body: "amazing sale for the best",
           author: "insign@gmail.com"
               }
           ]
     },
     {
       name: "bed",
       price: 250.69,
       description: "sturdy contriction from panama",
       reviews: [
               {
           stars: 2,
           body: "could be better",
           author: "john@gmail.com"
               },
               {
           stars: 1,
           body: "shitty",
           author: "carmen@gmail.com"
               }
           ]
     } ];
 } );
 </script>

</body>  
</html>

无法让 angular.js 遍历数组和 post 到 html

Can't get angular.js to loop through array and post to html

angularjs

ng-repeat