我无法在表格中显示对象数据 [英] I can't display object data into the table
问题描述
你好朋友。
这里我有Make One userService.js，userController.js和Index.html。
userService.js
Hello Friends.
Here I have Make One userService.js,userController.js and Index.html.
userService.js
In this Service I have make one Object called userlist and i make one funtion getUserList() which return userlist object.
/// <reference path="../node_modules/angular/angular.min.js" />
(function () {
angular.module("angularJsDemo")
.factory("userService", userService);
function userService()
{
var userlist = [{ name: 'viral' }, {surname:'patva'}];
var service = {
getUserList: getUserList,
addUser: addUser,
getUser: getUser,
updateUser: updateUser,
deleteUser: deleteUser
}
return service;
function getUserList()
{
console.log(userlist);
alert("Hi");
return userlist;
}
function addUser()
{
}
function getUser()
{
}
function updateUser()
{
}
function deleteUser()
{
}
}
})();
user.Controller.js
在这个文件中，我有Injected userService并创建一个名为getuserlist（）的函数，它将从userService.js文件返回userlist对象。
user.Controller.js
In this file I have Injected userService and make one function called getuserlist() which will return userlist object from the userService.js file.
/// <reference path="../node_modules/angular/angular.min.js" />
(function () {
angular.module("angularJsDemo")
.controller("userController", userController);
userController.$inject = ["userService"];
function userController(userService) {
var vm = this;
vm.getuserlist = getuserlist;
function getuserlist()
{
vm.userlist = userService.getUserList(vm.userlist);
}
}
})();
Index.html
在这个文件中我用ng-app定义了我的控制器和模块NG-控制器。我已经将我的控制器称为userController作为用户，我试图从控制器调用getuserlist（）方法，该控制器将从userService.js显示用户列表的对象，但我无法在index.html中以表格形式显示该对象< br $> b $ b
Index.html
In this file i have define my controller and module using ng-app and ng-controller. I have made my controller called userController as a users and i tried to call getuserlist() method from the controller which will display object of userlist from the userService.js, But i can't display that object in tabular formt in index.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<div class="row" ng-app="angularJsDemo" ng-controller="userController as users">
<table class="table" ng-repeat="list in users.getuserlist()">
<tr>
<th>Name</th>
</tr>
<tr>
<td>{{list.userlist}}</td>
</tr>
</table>
<div class="form-group">
<h1>Registraiton Form </h1>
<label for="firstname">Firstname:</label>
<input type="text" class="form-control" placeholder="Enter Your First Name" />
<label for="middlename">Middlename:</label>
<input type="text" class="form-control" placeholder="Enter Your Middle Name" />
<label for="lastname">Lastname:</label>
<input type="text" class="form-control" placeholder="Enter Your Last Name" />
<label for="address">Address:</label>
<textarea class="form-control" placeholder="Enter Your Address"></textarea>
<label for="city">City:</label>
<input type="text" class="form-control" placeholder="Enter Your City" />
<label for="contact">Contact Number:</label>
<input type="text" class="form-control" placeholder="Enter Your Contact Number" />
<br />
<input type="button" class="btn btn-primary" value="SUBMIT" />
</div>
</div>
</div>
<script src="node_modules/angular/angular.min.js"></script>
<script src="user.Servie.Module.js"></script>
<script src="user/user.Controller.js"></script>
<script src="user/userService.js"></script>
</body>
</html>
推荐答案
inject = [ userService];
function userController（userService）{
var vm = 此;
vm.getuserlist = getuserlist;
function getuserlist（）
{
vm.userlist = userService.getUserList（vm.userlist）;
}
}
}）（）;
inject = ["userService"]; function userController(userService) { var vm = this; vm.getuserlist = getuserlist; function getuserlist() { vm.userlist = userService.getUserList(vm.userlist); } } })();
Index.html
在这个文件中我用ng-app定义了我的控制器和模块NG-控制器。我已经将我的控制器称为userController作为用户，我试图从控制器调用getuserlist（）方法，该控制器将从userService.js显示用户列表的对象，但我无法在index.html中以表格形式显示该对象< br $> b $ b
Index.html
In this file i have define my controller and module using ng-app and ng-controller. I have made my controller called userController as a users and i tried to call getuserlist() method from the controller which will display object of userlist from the userService.js, But i can't display that object in tabular formt in index.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<div class="row" ng-app="angularJsDemo" ng-controller="userController as users">
<table class="table" ng-repeat="list in users.getuserlist()">
<tr>
<th>Name</th>
</tr>
<tr>
<td>{{list.userlist}}</td>
</tr>
</table>
<div class="form-group">
<h1>Registraiton Form </h1>
<label for="firstname">Firstname:</label>
<input type="text" class="form-control" placeholder="Enter Your First Name" />
<label for="middlename">Middlename:</label>
<input type="text" class="form-control" placeholder="Enter Your Middle Name" />
<label for="lastname">Lastname:</label>
<input type="text" class="form-control" placeholder="Enter Your Last Name" />
<label for="address">Address:</label>
<textarea class="form-control" placeholder="Enter Your Address"></textarea>
<label for="city">City:</label>
<input type="text" class="form-control" placeholder="Enter Your City" />
<label for="contact">Contact Number:</label>
<input type="text" class="form-control" placeholder="Enter Your Contact Number" />
<br />
<input type="button" class="btn btn-primary" value="SUBMIT" />
</div>
</div>
</div>
<script src="node_modules/angular/angular.min.js"></script>
<script src="user.Servie.Module.js"></script>
<script src="user/user.Controller.js"></script>
<script src="user/userService.js"></script>
</body>
</html>Hey ViralPatva,
I don’t know, if you can feed the HTML table like this. But what I can suggest, is the follwoing:
First I deleted your table and inserted an ul instead.
Hey ViralPatva,
I don't know, if you can feed the HTML table like this. But what I can suggest, is the follwoing:
First I deleted your table and inserted an ul instead.
<li ng-repeat="list in users.userlist">
<ul>
{{list.surname}}
</ul>
</li>
What you will see, is that the inital values for your userService.userlist do not work completely. Looked something like this:
- patva
这篇关于我无法在表格中显示对象数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
