ng-repeat 不适用于 Angular 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'
        }
    ];
  });

现在我正尝试在 movies.html-

中使用 ng-repeat 访问每个对象的值

<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

您需要将 $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 2

你应该试试这个

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

应该是

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

Answer 4

由于您将数组分配给 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 5

您仍然无法加载外部 URL。您需要制作一个过滤器以将外部链接列入白名单。参考下面的代码。

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

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

ng-repeat 不适用于 Angular JS

ng-repeat does not work on Angular JS

javascript

angularjs

ng-repeat