無法通過陣列和後得到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

回答

相關問題