Question

我是前端开发和学习angularJS的新手。我有以下文件夹结构

.
├── angular.min.js
├── app.js
├── bootstrap.min.css
└── index.html

这是我的index.html

<!DOCTYPE html>
<html ng-app="gemStore">

<head>
    <link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
    <script type="text/javascript" src="angular.min.js"></script>
    <script type="text/javascript" src="app.js"></script>
</head>

<body ng-controller="StoreController as store">
    <div class="product row" ng-hide="store.product.soldOut">
        <h3>
        {{store.product.name}}
        <em class="pull-right">${{store.product.price}}</em>
    </h3>
        <button ng-show="store.product.canPurchase">Add to cart</button>
    </div>
</body>

</html>

和我的app.js文件是

(function(){
    var app = angular.module('gemStore', []);

    app.controller('StoreController', function(){
        this.products = gem;
    });

    var gem = [{
            name: 'Azurite', 
            price: 2.95,
            canPurchase: false,
            soldOut: true;
            }, {
            name: 'Azurite 2', 
            price: 2.95,
            canPurchase: false,
            soldOut: true,      
            }]
})();

当我在chrome上打开这个index.html页面时，我看不到angularJS指令被实际值替换。我没有在任何服务器上托管此文件。根据我的理解，对于html，我可以将所有资源保存在相对路径中，html文件可以看到它们。那么为什么不在这里angularJS能够解决它？

当我在chrome

上打开它时，这是我的html输出

Answer 1

您忘了包含ngApp指令，如下所示：

angular.module('app', [])
...

<html ng-app="app">

Answer 2

您忘记了ng-repeat：访问store.product，同时应该使用<div ng-repeat="product in products>这样的包装元素，然后直接访问产品：product.soldOut或product.canPurchase。< / p>

尝试类似的事情：

<!DOCTYPE html>
<html ng-app="gemStore">

<head>
    <link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
    <script type="text/javascript" src="angular.min.js"></script>
    <script type="text/javascript" src="app.js"></script>
</head>

<body ng-controller="StoreController as store">
  <div ng-repeat="product in products>
    <div class="product row" ng-hide="product.soldOut">
        <h3>
        {{product.name}}
        <em class="pull-right">$ {{product.price}}</em>
    </h3>
        <button ng-show="product.canPurchase">Add to cart</button>
    </div>
  </div>
</body>

</html>

找不到angularJS libs

2 个答案: