Question

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

我是角色新手，我尝试使用ng-repeat将products[]中的所有项目发布到html，但{{expressions}}以文字而非计算方式发布。

我没有笔记本电脑，所以我在手机上的jsfiddle和w3school的编辑器上测试了所有这些。也许是编辑？有时他们似乎不一致。我跟随＆＃39;塑造Angular＆＃39;在CodeAcademy和w3school的教程中，我无法说出我做错了什么，这里是代码：

<!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 ng-app="myStore">代码更改为<body ng-controller="myStore">并将<body>更改为myStore。这是因为module是controller，而不是reviews

更新

每个MONO_IOMAP=all mono something.exe数组都存在一些意外的分号

它适用于这个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循环遍历数组并发布到html

3 个答案: