Javascript ng重复显示空表行
当我使用Javascript ng重复显示空表行,javascript,html,angularjs,angularjs-ng-repeat,Javascript,Html,Angularjs,Angularjs Ng Repeat,当我使用ng repeat时,我得到了空的标记。s的数量等于从服务/api返回的记录数量。我已登记ng检查员范围有正确记录。有人能指出我做错了什么吗 Index.html看起来像:- <!doctype html> <html> <head> <meta charset="utf-8"> <title>Test Admin</title> <meta name="description" c
ng repeat
时,我得到了空的
标记。
s的数量等于从服务/api返回的记录数量。我已登记ng检查员范围
有正确记录。有人能指出我做错了什么吗
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>
angular.module('ojadminuiApp')
.factory('userService', function ($resource, BASE_URL) {
return $resource(BASE_URL +'users/:id', null,
{
'update': { method:'PUT' , params: {id: '@id'}}
});
});
控制器看起来像:
<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>
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: '/'
});
});
angular.module('ojadminuiApp')
.controller('ManagesubscriberCtrl', function ($scope, userService) {
$scope.Users = userService.query();
});
服务/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"
}
]
我的工厂看起来像:-
<!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>
angular.module('ojadminuiApp')
.factory('userService', function ($resource, BASE_URL) {
return $resource(BASE_URL +'users/:id', null,
{
'update': { method:'PUT' , params: {id: '@id'}}
});
});
您在绑定要查看的值时有一个输入错误 您应该遵循cammel大小写,而不是像这样的标题大小写
{{user.firstName}}
要解决所有字段的上述绑定字段问题,因为使用密钥访问对象是区分大小写的。有人更改了API。实际上它工作得很好。有人加了下面几行。我删除了下面的行,它又开始工作了
var jsonFormatter = config.Formatters.OfType<JsonMediaTypeFormatter>().First();
jsonFormatter.SerializerSettings.ContractResolver = new CamelCasePropertyNamesContractResolver();
var jsonFormatter=config.Formatters.OfType().First();
jsonFormatter.SerializerSettings.ContractResolver=新的CamelCasePropertyNamesContractResolver();
以上代码行将所有JSON属性都转换为camel大小写。感谢Pankaj指出这一点。问题描述不清楚。你是说创建了行,但单元格是空的吗?另外,请删除与问题无关的代码,如边栏、路由器等。是的,单元格中没有数据。行对象在json中是什么样子?似乎您在
{{}
中没有正确地定位属性,或者是否有指令对数据标题执行任何操作?javascript区分大小写。您没有在VIEW中指定正确的属性。我尝试了您的代码,但它不起作用。当我使用我的代码时,我的作用域被正确填充(使用nginspector验证)。你能把{{Users}}放在视图上,以验证我使用{{Users}时分配给作用域变量的内容吗我得到了正确的json响应,它来自apically$resource
方法返回数组或对象,这就是为什么您可以直接分配给范围。开始时它是空的…然后内部填充为灰色。。。我从不使用$resource
,我不喜欢它