ng-repeat無法正常工作

你好傢伙，所以我運行這個簡單的HTML，Angular代碼，我不能得到電影標題和URL顯示在我的HTML ....但$ scope.test是displayinmg ... 。幫幫我！！ ng-repeat無法正常工作

angular.module('clientApp') 
 
    .controller('MoviesCtrl', function ($scope) { 
 
$scope.test = "tester"; 
 
    $scope.movies = [ 
 
     { 
 
     title:"Green Card", 
 
     url:"https://www.youtube.com/watch?v=_i8C9gO91ts" 
 
     }, 
 
     { 
 
     title: "Fidelawit ፊደላዊት", 
 
     url: "https://www.youtube.com/watch?v=B4u4A7CF3N0" 
 
     }, 
 
     { 
 
     title: "Heran ሔራን", 
 
     url: "https://www.youtube.com/watch?v=_TlRGhOdLJ0" 
 
     }, 
 
     { 
 
     title: "Lela Mafia ሌላ ማፊያ", 
 
     url: "https://www.youtube.com/watch?v=_i8C9gO91ts" 
 
     } 
 
    ]; 
 
    });

<table class="table table-striped"> 
 
    <thead> 
 
    <th>Title</th> 
 
    <th>URL</th> 
 
    </thead> 
 
    <tbody> 
 
     <tr ng-repeat="movie in movies"> 
 
     <td>{{ movie.title }}</td> 
 
     <td>{{ movie.url }}</td> 
 
     </tr> 
 
    </tbody> 
 
</table>

來源

2016-08-17 Harun

奇怪，因爲它的工作原理在此琴：https://jsfiddle.net/0dekzcek/ –

添加AngularJS，如果它是你與模塊工作的首位，你需要用空括號angular.module('clientApp', [])

angular.module('clientApp', []) 
 
    .controller('MoviesCtrl', function ($scope) { 
 
    $scope.test = "tester"; 
 
    $scope.movies = [ 
 
     { 
 
     title:"Green Card", 
 
     url:"https://www.youtube.com/watch?v=_i8C9gO91ts" 
 
     }, 
 
     { 
 
     title: "Fidelawit ፊደላዊት", 
 
     url: "https://www.youtube.com/watch?v=B4u4A7CF3N0" 
 
     }, 
 
     { 
 
     title: "Heran ሔራን", 
 
     url: "https://www.youtube.com/watch?v=_TlRGhOdLJ0" 
 
     }, 
 
     { 
 
     title: "Lela Mafia ሌላ ማፊያ", 
 
     url: "https://www.youtube.com/watch?v=_i8C9gO91ts" 
 
     } 
 
    ]; 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app='clientApp' ng-controller='MoviesCtrl'> 
 
    <table class="table table-striped"> 
 
    <thead> 
 
    <th>Title</th> 
 
    <th>URL</th> 
 
    </thead> 
 
    <tbody> 
 
     <tr ng-repeat="(key, movie) in movies"> 
 
     <td>{{ movie.title }}</td> 
 
     <td>{{ movie.url }}</td> 
 
     </tr> 
 
    </tbody> 
 
</table> 
 
</div>

來源

2016-08-17 15:05:19

你可能把它定義忘了加載angular.js。所以，只需將這個文件添加到所有腳本文件的上面。

<script src="angular.min.js"></script>

你可以從這裏下載該文件.. https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js

而且更新angular.module('clientApp')到angular.module('clientApp', [])

因此，修改後的代碼看起來就像這樣......

控制文件（.js文件）

angular.module('clientApp', []) 
    .controller('MoviesCtrl', function ($scope) { 
    $scope.test = "tester"; 
    $scope.movies = [ 
     { 
     title:"Green Card", 
     url:"https://www.youtube.com/watch?v=_i8C9gO91ts" 
     }, 
     { 
     title: "Fidelawit ፊደላዊት", 
     url: "https://www.youtube.com/watch?v=B4u4A7CF3N0" 
     }, 
     { 
     title: "Heran ሔራን", 
     url: "https://www.youtube.com/watch?v=_TlRGhOdLJ0" 
     }, 
     { 
     title: "Lela Mafia ሌላ ማፊያ", 
     url: "https://www.youtube.com/watch?v=_i8C9gO91ts" 
     } 
    ]; 
    });

HTML文件

<script src="angular.min.js"></script> 
<div ng-app='clientApp' ng-controller='MoviesCtrl'> 
    <table class="table table-striped"> 
    <thead> 
    <th>Title</th> 
    <th>URL</th> 
    </thead> 
    <tbody> 
     <tr ng-repeat="(key, movie) in movies"> 
     <td>{{ movie.title }}</td> 
     <td>{{ movie.url }}</td> 
     </tr> 
    </tbody> 
</table> 
</div>

來源

2016-08-17 15:05:31

的問題似乎並不太大。只有兩件事我已經完成

添加到身體來初始化角應用程序。乙

<body ng-app='clientApp'>

新增納克控制器來表標記

<table class="table table-striped" ng-controller="MoviesCtrl">

然而，這是必須的。必須使[]爲零依賴關係。

angular.module('clientApp', [])

這裏有雲

angular.module('clientApp', []) 
 
    .controller('MoviesCtrl', function ($scope) { 
 
$scope.test = "tester"; 
 
    $scope.movies = [ 
 
     { 
 
     title:"Green Card", 
 
     url:"https://www.youtube.com/watch?v=_i8C9gO91ts" 
 
     }, 
 
     { 
 
     title: "Fidelawit ፊደላዊት", 
 
     url: "https://www.youtube.com/watch?v=B4u4A7CF3N0" 
 
     }, 
 
     { 
 
     title: "Heran ሔራን", 
 
     url: "https://www.youtube.com/watch?v=_TlRGhOdLJ0" 
 
     }, 
 
     { 
 
     title: "Lela Mafia ሌላ ማፊያ", 
 
     url: "https://www.youtube.com/watch?v=_i8C9gO91ts" 
 
     } 
 
    ]; 
 
    });

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script> 
 
</head> 
 
<body ng-app='clientApp'> 
 

 
<table class="table table-striped" ng-controller="MoviesCtrl"> 
 
    <thead> 
 
    <th>Title</th> 
 
    <th>URL</th> 
 
    </thead> 
 
    <tbody> 
 
     <tr ng-repeat="movie in movies"> 
 
     <td>{{ movie.title }}</td> 
 
     <td>{{ movie.url }}</td> 
 
     </tr> 
 
    </tbody> 
 
</table> 
 

 
</body> 
 
</html>

來源

2016-08-17 15:30:41 ajaykumar

謝謝你們修好了 – Harun

ng-repeat無法正常工作

回答

相關問題