我变空了 <td>我使用 ng-repeat 时的标签.数量<td> s 等于从服务/api 返回的记录数。我已经检查了 ng-inspector scope有适当的记录。谁能指出我哪里做错了？
Index.html 看起来像:-
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test Admin</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<!-- build:css(.) styles/vendor.css -->
<!-- bower:css -->
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="bower_components/fontawesome/css/font-awesome.css" />
<link rel="stylesheet" href="bower_components/angular-toastr/dist/angular-toastr.css" />
<link rel="stylesheet" href="bower_components/ngDatepicker/src/css/ngDatepicker.css" />
<!-- endbower -->
<!-- endbuild -->
<!-- build:css(.tmp) styles/main.css -->
<link rel="stylesheet" href="styles/style.css">
<link rel="stylesheet" href="styles/style-responsive.css">
<!-- endbuild -->
</head>
<body ng-app="ojadminuiApp">
<!--[if lte IE 8]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<!-- Add your site or application content here -->
<section id="container" >
<!-- **********************************************************************************************************************************************************
TOP BAR CONTENT & NOTIFICATIONS
*********************************************************************************************************************************************************** -->
<!--header start-->
<header class="header black-bg">
<div class="sidebar-toggle-box">
<div class="fa fa-bars tooltips" data-placement="right" data-original-title="Toggle Navigation"></div>
</div>
<!--logo start-->
<a href="index.html" class="logo"><b>Online Judgments - Admin Panel</b></a>
<!--logo end-->
</div>
<div class="top-menu">
<ul class="nav pull-right top-menu">
<li><a class="logout" href="login.html">Logout</a></li>
</ul>
</div>
</header>
<!--header end-->
<!-- **********************************************************************************************************************************************************
MAIN SIDEBAR MENU
*********************************************************************************************************************************************************** -->
<!--sidebar start-->
<aside>
<div id="sidebar" class="nav-collapse ">
<!-- sidebar menu start-->
<ul class="sidebar-menu" id="nav-accordion">
<p class="centered"><img src="images/logo.jpg" class="img-circle" width="60"></p>
<h5 class="centered">Admin Menu</h5>
<li>
<a ng-href="#/AddSubscriber">
<i class="fa fa-user-plus"></i>
<span>Add Subscriber</span>
</a>
</li>
<li>
<a ng-href="#/">
<i class="fa fa-users"></i>
<span>Manage Subscribers</span>
</a>
</li>
</ul>
<!-- sidebar menu end-->
</div>
</aside>
<!--sidebar end-->
<!-- **********************************************************************************************************************************************************
MAIN CONTENT
*********************************************************************************************************************************************************** -->
<!--main content start-->
<div ng-view="">
</div>
<!-- /MAIN CONTENT -->
<!--main content end-->
<!--footer start-->
<footer class="site-footer">
<div class="text-center">
Test admin
<a href="#" class="go-top">
<i class="fa fa-angle-up"></i>
</a>
</div>
</footer>
<!--footer end-->
</section>
<!-- build:js(.) scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-touch/angular-touch.js"></script>
<script src="bower_components/jquery.nicescroll/jquery.nicescroll.js"></script>
<script src="bower_components/jquery.cookie/jquery.cookie.js"></script>
<script src="bower_components/dcjqaccordion/js/jquery.dcjqaccordion.2.7.min.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<script src="bower_components/angular-toastr/dist/angular-toastr.tpls.js"></script>
<script src="bower_components/moment/moment.js"></script>
<script src="bower_components/ngDatepicker/src/js/ngDatepicker.min.js"></script>
<!-- endbower -->
<!-- endbuild -->
<!-- build:js({.tmp,app}) scripts/scripts.js -->
<script src="scripts/common-scripts.js"></script>
<script src="scripts/app.js"></script>
<script src="scripts/controllers/about.js"></script>
<script src="scripts/controllers/addsubscriber.js"></script>
<script src="scripts/services/journalsservice.js"></script>
<script src="scripts/services/courtsservice.js"></script>
<script src="scripts/controllers/managesubscriber.js"></script>
<script src="scripts/services/userservice.js"></script>
<script src="scripts/directives/datepickerpopup.js"></script>
<script src="scripts/services/formatdate.js"></script>
<!-- endbuild -->
</body>
</html>
View 看起来像:
<section id="main-content">
<section class="wrapper">
<h3><i class="fa fa-angle-right"></i> Manage Subscriber</h3>
<div class="form-group col-lg-12">
<label class="col-sm-2 col-sm-2 control-label">Search</label>
<div class="col-sm-10">
<input type="text" ng-model="search" class="form-control" placeholder="Enter text to Search">
</div>
</div>
<div class="col-lg-12">
<div class="content-panel">
<table class="table table-bordered table-striped table-condensed cf">
<thead class="cf">
<tr>
<th>User Name</th>
<th>Name</th>
<th>Password</th>
<th>Start Date</th>
<th>End Date</th>
<th>Mobile</th>
<th>Address</th>
<th>Phone</th>
<th></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="user in Users | filter:search">
<td data-title="User Name"><a href="#/ViewSubscriber/{{user.UserId}}" >{{user.UserName}}</a></td>
<td data-title="Name">{{user.FirstName + ' ' + user.LastName }}</td>
<td data-title="Password">{{user.Password}}</td>
<td data-title="Start Date">{{user.StartDate | date:'dd/MM/yyyy'}}</td>
<td data-title="End Date">{{user.EndDate | date:'dd/MM/yyyy'}}</td>
<td data-title="Mobile">{{user.Mobile}}</td>
<td data-title="Address">
{{ user.Address1 + ' ' +
user.Address2 + ' ' +
user.Address3 + ' ' +
user.State + ' ' +
user.PinCode + ' ' +
user.Country }}
</td>
<td data-title="Phone">{{user.StdCode + ' ' + user.Phone}}</td>
<td>
<a class="btn btn-primary btn-xs" href="#/AddSubscriber/{{user.UserId}}"><i class="fa fa-pencil"></i></a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
</section>
app.js 看起来像:
angular
.module('ojadminuiApp', [
'ngAnimate',
'ngCookies',
'ngResource',
'ngRoute',
'ngSanitize',
'ngTouch',
'ui.bootstrap',
'toastr',
'jkuri.datepicker'
])
.constant('BASE_URL', 'http://localhost/OnlineAdmin.API/api/')
.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/manageSubscriber.html',
controller: 'ManagesubscriberCtrl'
})
.when('/AddSubscriber', {
templateUrl: 'views/addSubscriber.html',
controller: 'AddsubscriberCtrl'
})
.when('/AddSubscriber/:id', {
templateUrl: 'views/addSubscriber.html',
controller: 'AddsubscriberCtrl'
})
.when('/ViewSubscriber/:id',{
templateUrl : 'views/viewSubscriber.html',
controller: 'AddsubscriberCtrl'
})
.otherwise({
redirectTo: '/'
});
});
Controller 看起来像:
angular.module('ojadminuiApp')
.controller('ManagesubscriberCtrl', function ($scope, userService) {
$scope.Users = userService.query();
});
service/api 的输出看起来像
[
{
"userId": 1033,
"userName": "test@gmail.com",
"firstName": "testfirst",
"password": "testpass1",
"lastName": "tstlast",
"startDate": "2016-08-02T00:00:00",
"endDate": "2018-02-24T00:00:00",
"createdDate": "2016-02-08T19:18:24.357",
"updatedDate": "2016-02-08T19:45:11.373",
"mobile": "939393993",
"email": "test@gmail.com",
"address1": "Ad1",
"address2": "AD2",
"address3": "AD3",
"country": "tstctry",
"state": "tststate",
"pincode": "100011",
"stdCode": "080",
"phone": "309333030"
}
]
我的工厂看起来像:-
angular.module('ojadminuiApp')
.factory('userService', function ($resource, BASE_URL) {
return $resource(BASE_URL +'users/:id', null,
{
'update': { method:'PUT' , params: {id: '@id'}}
});
});
最佳答案
您在绑定(bind)值以查看时输入错误。
你应该遵循驼峰式大小写而不是标题大小写
{{user.firstName}}
解决所有字段的上述绑定(bind)字段问题，因为使用键访问对象是区分大小写的。
关于javascript - ng-repeat 显示空表行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35684156/