AngularJS; html表格中未列出模型数据
[英]AngularJS; Model data not being listed in an html table
问题描述
<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>
The above code is how my html side looks like. 
上面的代码是我的html面的样子。 I see the table on the page but without the data from the controller. 我看到页面上的表格，但没有来自控制器的数据。 Following is my controller code. 以下是我的控制器代码。 What can I do to fix this? 我该怎么做才能解决此问题？
angular.module('clientBookApp') .controller('MoviesCtrl', function ($scope) { this.movies = [ { title: 'Captain America', url: 'https://www.captainamerica.com' } ]; });
I tried adding ng-controller in a body tag but it didn't work. 我尝试在body标签中添加ng-controller，但没有成功。
<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>
2 个解决方案
解决方案1
1 已采纳 2016-02-23 16:39:53
this is just because this its different from $scope 这只是因为this与$scope不同
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); });
<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>
if you wanna use this you don't need to inject $scope , but you need to use the controller as syntax as follow. 如果您想使用this ，则不需要注入$scope ，但是您需要按照以下方式使用controller as语法。
var myApp = angular.module("myApp", []); myApp.controller("myCtrl", [ function() { var vm = this; vm.movies = [{ title: 'Iron Man', url: 'https://www.ironman.com' }]; } ]);
<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>
解决方案2
1 2016-02-23 17:08:36
Everything looks good on your code. 一切在您的代码上看起来都不错。 Only issue is your angular app module missing [] and you should use $scope in place of this . 唯一的问题是您的角度应用程序模块丢失[] ，应使用$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'
}
];
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.