Javascript沒有約束力

我想鏈接我的JavaScript文件和json文件到我的html文件，它似乎並沒有工作。Javascript沒有約束力

這裏是JSON文件：

[ 
{ 
    "tops" : [ 
     { "image" : "images/top1.jpg" }, 
     { "image" : "images/top2.jpg" }, 
     { "image" : "images/top3.jpg" }, 
     { "image" : "images/top4.jpg" } 
    ] 
}, 

{ 
    "bottoms" : [ 
     { "image" : "images/jeans1.jpg" }, 
     { "image" : "images/jeans2.jpg" }, 
     { "image" : "images/jeans3.jpg" }, 
     { "image" : "images/jeans4.jpg" } 
    ] 
} 
]

這裏是JavaScript文件：

(function(){ 

var app = angular.module('myContent', []); 

app.controller('ContentController', ['$scope', 'http', function ($scope,$http) { 

    $http.get('imagedata.json').then(function(contentData){ 

     $scope.imageArray = contentData.data; 
     $scope.imageCount = $scope.imageArray.length; 

    }); 



}]); 

})();

下面是HTML文件：

<!DOCTYPE html> 
<html lang="en" ng-app="myContent"> 
<head> 
<meta charset="UTF-8"> 
<title>ShopME Tops</title> 
<link rel="stylesheet" type="text/css" href="mystyle.css"/> 
<link rel="stylesheet" 
    href="https://cdnjs.cloudflare.com/ajax/libs/font- 
    awesome/4.7.0/css/font-awesome.min.css"> 
<script type="text/javascript" 
src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> 
</script> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
<script type="text/javascript" src="myscript.js"></script> 
</head> 

<body> 



<!-- Container for grid layout --> 
<div ng-controller="ContentController" class="container"> 
    <!-- Container for row --> 
    <div class="row"> 
     <!-- Container for col --> 
     <div> {{ imageCount }}</div> 
    </div> 
</div> 

</body> 
</html>

在我的HTML文件，我想顯示我imageArray的數量，應該是2，但現在我所看到的是實際的單詞'imageCount'。

有沒有人看到我做錯了什麼？

來源

2017-07-16 Cameron

檢查控制檯是否有錯誤。
在您的依賴中使用$http而不是http模塊。

(function() { 
 
    var app = angular.module('myContent', []); 
 
    app.controller('ContentController', ['$scope', '$http', function($scope, $http) { 
 
    var contentData = [{ 
 
     "tops": [{ 
 
      "image": "images/top1.jpg" 
 
      }, 
 
      { 
 
      "image": "images/top2.jpg" 
 
      }, 
 
      { 
 
      "image": "images/top3.jpg" 
 
      }, 
 
      { 
 
      "image": "images/top4.jpg" 
 
      } 
 
     ] 
 
     }, 
 

 
     { 
 
     "bottoms": [{ 
 
      "image": "images/jeans1.jpg" 
 
      }, 
 
      { 
 
      "image": "images/jeans2.jpg" 
 
      }, 
 
      { 
 
      "image": "images/jeans3.jpg" 
 
      }, 
 
      { 
 
      "image": "images/jeans4.jpg" 
 
      } 
 
     ] 
 
     } 
 
    ]; 
 
    $scope.imageArray = contentData; 
 
    $scope.imageCount = $scope.imageArray.length; 
 
    }]); 
 
})();

<!DOCTYPE html> 
 
<html lang="en" ng-app="myContent"> 
 

 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>ShopME Tops</title> 
 
    <link rel="stylesheet" type="text/css" href="mystyle.css" /> 
 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font- 
 
    awesome/4.7.0/css/font-awesome.min.css"> 
 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> 
 
    </script> 
 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
    <script type="text/javascript" src="myscript.js"></script> 
 
</head> 
 

 
<body> 
 
    <div ng-controller="ContentController" class="container"> 
 
    <div class="row"> 
 
     <div> {{ imageCount }}</div> 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

來源

2017-07-16 02:34:47 Rayon

感謝，這工作！ – Cameron

@Cameron - 很高興你找到了你的答案 - 不要忘記回來並將Rayon的答案標記爲你選擇的正確答案！ –

Javascript沒有約束力

回答

相關問題