无法通过阵列和后得到angular.js循环到html

编辑：改变NG-控制器NG-应用在body标签，是错字无法通过阵列和后得到angular.js循环到html

我新的角度和我尝试使用ng-repeat将products[]中的所有项目发布到html，但{{expressions}}作为文本而不是计算出来。

我没有我的笔记本电脑，所以我从我的手机上对jsfiddle和w3school的编辑器进行了测试。也许是编辑？有时他们看起来不一致。我下面就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: "[email protected]" 
       }, 
       { 
      stars: 4, 
      body: "amazing sale for the best", 
      author: "[email protected]" 
       } 
      ]; 
    }, 
    { 
     name: "bed", 
     price: 250.69, 
     description: "sturdy contriction from panama", 
     reviews: [ 
       { 
      stars: 2, 
      body: "could be better", 
      author: "[email protected]" 
       }, 
       { 
      stars: 1, 
      body: "shitty", 
      author: "[email protected]" 
       } 
      ]; 
    } ]; 
}); 
</script> 

</body> 
</html>

来源

2015-06-22 Ian Last

它看起来像你有一些语法错误：

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: "[email protected]" 
       }, 
       { 
      stars: 4, 
      body: "amazing sale for the best", 
      author: "[email protected]" 
       } 
      ]//remove this: ; 
     }, 
     { 
     name: "bed", 
     price: 250.69, 
     description: "sturdy contriction from panama", 
     reviews: [ 
       { 
      stars: 2, 
      body: "could be better", 
      author: "[email protected]" 
       }, 
       { 
      stars: 1, 
      body: "shitty", 
      author: "[email protected]" 
       } 
      ]//remove this; 
     } ]; 
    });

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

来源

2015-06-22 04:16:21 bluetoft

打我吧:) – tavnab

我不知道你不会用分号结尾嵌套/内部数组，谢谢。如果我不用我的手机，我可以使用调试器 –

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

更新

在每个reviews阵列

它适用于这个plunker存在一些意想不到的分号：http://plnkr.co/edit/5hnciX46Hb5wLwDn4R6K

来源

2015-06-22 03:54:31

Mistyping是我学习代码的最大障碍。我将ng-controller更改为html标签中的ng-app，但是我不必将控制器放在body标签或其他包装元素中？我只是尝试了两种方法，仍然得到了相同的结果 –

也有一个原因，我不能使用身体标签，而不是html的ng-app？ –

您可以在正文或包含所有控制器的div上使用ng-app，因为这种情况需要一个好的调试工具。每个'reviews'数组结尾都有一个意想不到的分号，我创建了一个plunker我会更新答案 –

其他人说，你有一些语法错误。我从这个产品中删除了分号，它显示得很好。

<!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: "[email protected]" 
       }, 
       { 
      stars: 4, 
      body: "amazing sale for the best", 
      author: "[email protected]" 
       } 
      ] 
    }, 
    { 
     name: "bed", 
     price: 250.69, 
     description: "sturdy contriction from panama", 
     reviews: [ 
       { 
      stars: 2, 
      body: "could be better", 
      author: "[email protected]" 
       }, 
       { 
      stars: 1, 
      body: "shitty", 
      author: "[email protected]" 
       } 
      ] 
    } ]; 
}); 
</script> 

</body> 
</html>

来源

2015-06-22 04:28:05 EddieDean

谢谢，我希望我可以upvote你们的家伙回答，我想我需要15代表做这个 –

无法通过阵列和后得到angular.js循环到html

回答

相关问题