ng-repeat工作不正常

时间:2016-08-17 15:00:52

标签: javascript html angularjs

大家好,所以我运行这个简单的HTML,Angular代码,我无法在我的HTML中获得电影标题和网址显示....但$ scope.test显示....帮助!!

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>

3 个答案:

答案 0 :(得分:1)

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

答案 1 :(得分:1)

你可能忘了加载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>

答案 2 :(得分:0)

  

问题似乎不太大。我做过的只有两件事

     
      
  1. 添加到正文以初始化角度应用。乙
  2.   
In 1000000 attempts, there were 10 random involutions produced, with the distribution...
(0, 1, 2, 3)     99874
(0, 1, 3, 2)    100239
(0, 2, 1, 3)    100118
(0, 3, 2, 1)     99192
(1, 0, 2, 3)     99919
(1, 0, 3, 2)    100304
(2, 1, 0, 3)    100098
(2, 3, 0, 1)    100211
(3, 1, 2, 0)    100091
(3, 2, 1, 0)     99954
  
      
  1. 将ng-controller添加到表格标签
  2.   
<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"
      }
    ];
  });

相关问题