NG重複不會對角JS

Question

我創建了一個控制器（movies.js）爲如下─

'use strict'; 
angular.module('clientApp') 
    .controller('MoviesCtrl', function ($scope) { 
    $scope.movies = [ 
     { 
     title:'Star Wars!', 
     url:'http://www.google.com' 
     }, 
     { 
     title: 'Star Wars2!', 
     url: 'http://www.google.com' 
     }, 
     { 
     title: 'Star Wars3!', 
     url: 'http://www.google.com' 
     } 
    ]; 
    }); 

現在我想要在電影中使用NG-重複訪問每個對象的值工作.html-

<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> 

但是，這些值未按預期填充。有人可以提供任何提示，我應該在哪裏尋找解決辦法？

Answer 1

由於您正在將陣列分配到this所以

var app = angular.module('my-app', [], function() {}) 
 

 
app.controller('AppController', function($scope) { 
 
    this.movies = [{ 
 
    title: 'Star Wars!', 
 
    url: 'http://www.google.com' 
 
    }, { 
 
    title: 'Star Wars2!', 
 
    url: 'http://www.google.com' 
 
    }, { 
 
    title: 'Star Wars3!', 
 
    url: 'http://www.google.com' 
 
    }]; 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="my-app"> 
 
    <div ng-controller="AppController as ctrl"> 
 
    <table class="table table-striped"> 
 
     <thead> 
 
     <th>Title</th> 
 
     <th>URL</th> 
 
     </thead> 
 
     <tbody> 
 
     <tr ng-repeat="movie in ctrl.movies"> 
 
      <td>{{ movie.title }}</td> 
 
      <td>{{ movie.url }}</td> 
 
     </tr> 
 
     </tbody> 
 
    </table> 
 
    </div> 
 
</div>

---

或指定數組的範圍變量

var app = angular.module('my-app', [], function() {}) 
 

 
app.controller('AppController', function($scope) { 
 
    $scope.movies = [{ 
 
    title: 'Star Wars!', 
 
    url: 'http://www.google.com' 
 
    }, { 
 
    title: 'Star Wars2!', 
 
    url: 'http://www.google.com' 
 
    }, { 
 
    title: 'Star Wars3!', 
 
    url: 'http://www.google.com' 
 
    }]; 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="my-app"> 
 
    <div ng-controller="AppController"> 
 
    <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> 
 
    </div> 
 
</div>

Answer 2

你需要注入$scope到控制器中，並用它來你的數組綁定到你的觀點

.controller('MoviesCtrl', function($scope){ 
    $scope.movies = [ 
     { 
      title:'Star Wars!', 
      url:'http://www.google.com' 
     },{ 
      title: 'Star Wars2!', 
      url: 'http://www.google.com' 
     },{ 
      title: 'Star Wars3!', 
      url: 'http://www.google.com' 
     } 
    ]; 
}); 

而且，不要忘記，你需要在視圖中指定有一個控制器，你想用。例如，在你的HTML：

<div ng-controller="MoviesCtrl"> 
    <!-- any html you associate with your controller --> 
</div> 

Answer 3

你應該試試這個

'use strict'; 
angular.module('validationApp' ,[]) 
    .controller('MoviesCtrl', function ($scope) { 
    $scope.movies = [ 
     { 
     title:'Star Wars!', 
     url:'http://www.google.com' 
     }, 
     { 
     title: 'Star Wars2!', 
     url: 'http://www.google.com' 
     }, 
     { 
     title: 'Star Wars3!', 
     url: 'http://www.google.com' 
     } 
    ]; 
}); 

Answer 4

應該

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

，或者你應該把它綁定到$ scope.movi​​es

Answer 5

你仍然無法加載外部URL。您需要製作一個過濾器，將外部鏈接列入白名單。請參閱以下代碼。

angular.module('myApp') 
    .filter('trustUrl', function ($sce) { 
    return function(url) { 
    return $sce.trustAsResourceUrl(url); 
    }; 
}); 

<td> {{ movie.url | trustUrl}} </td>