Question

＆＃13;

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

＆＃13;

以上代码是我的html方面的样子。我在页面上看到了表格，但没有来自控制器的数据。以下是我的控制器代码。我该怎么做才能解决这个问题？

＆＃13;

angular.module('clientBookApp')
  .controller('MoviesCtrl', function ($scope) {
    this.movies = [
      {
        title: 'Captain America',
        url: 'https://www.captainamerica.com'
      }
    ];
  });

＆＃13;

我尝试在body标签中添加ng-controller，但它没有用。

＆＃13;

<body ng-app="clientBookApp" ng-controller="MoviesCtrl">
  <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>
</body>

＆＃13;

Answer 1

这只是因为this与$scope

不同

＆＃13;

var myApp = angular.module("myApp", []);
myApp.controller("myCtrl", function($scope) {
  $scope.movies = [{
    title: 'Captain America',
    url: 'https://www.captainamerica.com'
  }];
  this.movies = [{
    title: 'Iron Man',
    url: 'https://www.ironman.com'
  }];
  console.log(this === $scope);
});

＆＃13;

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

＆＃13;

如果您想使用this，则不需要注入$scope，但您需要使用controller as语法，如下所示。

＆＃13;

var myApp = angular.module("myApp", []);
myApp.controller("myCtrl", [
  function() {
    var vm = this;
    vm.movies = [{
      title: 'Iron Man',
      url: 'https://www.ironman.com'
    }];
  }
]);

＆＃13;

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

＆＃13;

Answer 2

这是有效的demo

您的代码一切都很好看。唯一的问题是您的角度应用模块缺少[]，您应该使用$scope代替this。

<body ng-app="clientBookApp" ng-controller="MoviesCtrl">
  <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>
</body>

angular.module('clientBookApp',[])
  .controller('MoviesCtrl', function ($scope) {
    $scope.movies = [
      {
        title: 'Captain America',
        url: 'https://www.captainamerica.com'
      }
    ];
  });

AngularJS;模型数据未在html表中列出

2 个答案: