1
我在這裏做錯了什麼?我試圖使用角度呈現表格,但表格顯示爲空,其中數據應爲{{ place.id}}
,{{ place.name}}
和{{ place.social}}
。
<head>
<title>Angular JS </title>
<script src="http://code.angularjs.org/1.4.8/angular.js"></script>
<script src="http://code.angularjs.org/1.4.8/angular-resource.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
<script>
var app = angular.module('MyForm', ['ui.bootstrap', 'ngResource']);
app.controller('myCtrl', function ($scope, $http) {
$http.get('http://passarola.pt/api/places').success(function(data) {
$scope.predicate = 'id';
$scope.reverse = true;
$scope.currentPage = 1;
};
$scope.order = function (predicate) {
$scope.reverse = ($scope.predicate === predicate) ? !$scope.reverse : false;
$scope.predicate = predicate;
};
$scope.totalItems = $scope.places.length;
$scope.numPerPage = 5;
$scope.paginate = function (value) {
var begin, end, index;
begin = ($scope.currentPage - 1) * $scope.numPerPage;
end = begin + $scope.numPerPage;
index = $scope.places.indexOf(value);
return (begin <= index && index < end);
};
});
</script>
</head>
<body ng-app="MyForm">
<div ng-controller="myCtrl">
<div class="container-fluid">
<pre>Passarola Beer</pre>
<hr />
<table class="table table-striped">
<thead>
<tr>
<th class="media_gone">
<a href="" ng-click="order('id')">ID</a>
</th>
<th><a href="" ng-click="order('name')"> Name</a> </th>
<th><a href="" ng-click="order('social')">Social Media</a> </th>
</tr>
</thead>
<tbody>
<tr>
<td class="media_gone2"> <input type="text" ng-model="search.id" /></td>
<td> <input type="text" ng-model="search.name" /> </td>
</tr>
<tr ng-repeat="place in places | orderBy:predicate:reverse | filter:paginate| filter:search" ng-class-odd="'odd'">
<td>{{ place.id}}</td>
<td>{{ place.name}}</td>
<td class="gender_gone">{{ place.social}}</td>
</tr>
</tbody>
</table>
<pagination total-items="totalItems" ng-model="currentPage"
max-size="5" boundary-links="true"
items-per-page="numPerPage" class="pagination-sm">
</pagination>
</div>
</div>
</body>
</html>
示例代碼:
var app = angular.module('MyForm', ['ui.bootstrap', 'ngResource']);
app.controller('myCtrl', function ($scope, $timeout) {
$scope.predicate = 'id';
$scope.reverse = true;
$scope.currentPage = 1;
$scope.order = function (predicate) {
$scope.reverse = ($scope.predicate === predicate) ? !$scope.reverse : false;
$scope.predicate = predicate;
};
$scope.places = [
{ id: 'Kevin', name: 25, social: 'boy' },
{ id: 'John', name: 30, social: 'girl' },
{ id: 'Laura', name: 28, social: 'girl' },
{ id: 'Joy', name: 15, social: 'girl' },
{ id: 'Mary', name: 28, social: 'girl' },
{ id: 'Peter', name: 95, social: 'boy' },
{ id: 'Bob', name: 50, social: 'boy' },
{ id: 'Erika', name: 27, social: 'girl' },
{ id: 'Patrick', name: 40, social: 'boy' },
{ id: 'Tery', name: 60, social: 'girl' }
];
$scope.totalItems = $scope.places.length;
$scope.numPerPage = 5;
$scope.paginate = function (value) {
var begin, end, index;
begin = ($scope.currentPage - 1) * $scope.numPerPage;
end = begin + $scope.numPerPage;
index = $scope.places.indexOf(value);
return (begin <= index && index < end);
};
檢查瀏覽器控制檯是否有錯誤。無論何時您看到帶有{{}}的原始表達式而不僅僅是空白空間或數據,這都表明角度由於某種原因未能加載。 – Claies
@Claies它說''SyntaxError:失蹤)後參數列表和'錯誤:[$注射器:modulerr]無法實例化模塊MyForm由於: [$注射器:nomod]模塊'MyForm'不可用!' –
確定,我解決了這部分,但現在它說'錯誤:$ scope.places是undefined',我不知道該怎麼做 –