AngularJS不起作用

-3

您是否會幫我理解爲什麼這些代碼不起作用？雖然我是AngularJS的新手，但我認爲我遵循了所有的指示。AngularJS不起作用

只要我有index.html和app.js如下所示，但是當我打開index.html時，它什麼也沒有顯示（空白頁）。

(function(){ 
 
\t var app = angular.module("store",[]);  \t 
 
\t app.contorller("StoreController", function($scope){ 
 
\t \t this.products = gems; 
 
\t }); 
 
\t 
 
\t var gems = [ 
 
\t \t { 
 
\t \t \t name: 'Dodecachedron1', 
 
\t \t \t price: 1.95, 
 
\t \t \t description: 'In geometry, a dodecahedron is any polyhedron with twelve flat faces. The most familiar dodecahedron is the regular dodecahedron, which is a Platonic solid', 
 
\t \t \t canPurchase: true 
 
\t \t }, 
 
\t \t { 
 
\t \t \t name: 'Dodecachedron2', 
 
\t \t \t price: 2.95, 
 
\t \t \t description: 'In geometry, a dodecahedron is any polyhedron with twelve flat faces. The most familiar dodecahedron is the regular dodecahedron, which is a Platonic solid', 
 
\t \t \t canPurchase: false 
 
\t \t } \t \t \t 
 
\t ]; 
 
})();

<!doctype html> 
 
<html ng-app='store'> 
 
\t <head> 
 
\t \t <title>Gem Online Store</title> 
 
\t \t <meta charset="utf-8"> 
 
\t \t <link rel="stylesheet" type="text/css" href="bootstrap/bootstrap.min.css" /> 
 
\t \t <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script> 
 
\t \t <script type="text/javascript" src="app.js"></script> 
 
\t </head> 
 
\t <body class="well"" ng-controller='StoreController'> 
 
\t \t <div ng-repeat='product in StoreController.products'> 
 
\t \t \t <h1>{{product.name}}</h1> 
 
\t \t \t <em class="pull-right">${{product.price | currency}} </em> 
 
\t \t \t <p>{{product.description}}</p> 
 
\t \t \t <button ng-show='product.canPurchase'>Add to cart</button> \t \t \t 
 
\t \t </div> 
 
\t </body> 
 
</html>

來源

2016-05-13 Min

您需要將範圍設置爲使用
在「井」修復雙引號」
錯字在app.controller
產品變量您不需要StoreController作爲重複的前綴
將您的css更新爲cdn
刪除額外的「$」，因爲貨幣過濾器添加它已經
這個演示中，我去掉「app.js」作爲一個依賴，但是你需要在你的代碼

(function() { 
 
    var app = angular.module("store", []); 
 

 
    app.controller("StoreController", function($scope) { 
 
    $scope.products = gems; 
 
    }); 
 

 
    var gems = [{ 
 
    name: 'Dodecachedron1', 
 
    price: 1.95, 
 
    description: 'In geometry, a dodecahedron is any polyhedron with twelve flat faces. The most familiar dodecahedron is the regular dodecahedron, which is a Platonic solid', 
 
    canPurchase: true 
 
    }, { 
 
    name: 'Dodecachedron2', 
 
    price: 2.95, 
 
    description: 'In geometry, a dodecahedron is any polyhedron with twelve flat faces. The most familiar dodecahedron is the regular dodecahedron, which is a Platonic solid', 
 
    canPurchase: false 
 
    }]; 
 
})();

<!doctype html> 
 
<html ng-app="store"> 
 
<head> 
 
    <title>Gem Online Store</title> 
 
    <meta charset="utf-8"> 
 
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" /> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script> 
 
    <!--<script src="app.js"></script>--> 
 
</head> 
 
<body class="well"> 
 
    <div ng-controller="StoreController"> 
 
    <div ng-repeat="product in products"> 
 
     <h1>{{product.name}}</h1> 
 
     <em class="pull-right">{{product.price | currency}} </em> 
 
     <p>{{product.description}}</p> 
 
     <button ng-show="product.canPurchase">Add to cart</button> 
 
    </div> 
 
    </div> 
 
</body> 
 
</html>

來源

2016-05-13 03:12:38 Enkode

不知道爲什麼我在這裏-2。沒有人提供反饋爲什麼？我列出了所提供的問題和代碼。如果你冷靜評論你爲什麼低調。 – Enkode

你得到負面聲譽的原因是OP的問題是錯字。這些問題無法複製，答案也不會幫助其他人。您應該使用註釋來指出這些問題並標記問題而不是回答。 –

這個答案應該被接受。 –

AngularJS不起作用

回答

相關問題