Click here to Skip to main content
15,307,117 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Hello Friends.

Here I have Make One userService.js,userController.js and Index.html.

userService.js

C#
In this Service I have make one Object called userlist and i make one funtion getUserList() which return userlist object.


JavaScript
/// <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

In this file I have Injected userService and make one function called getuserlist() which will return userlist object from the userService.js file.

JavaScript
/// <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

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


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>
Posted

1 solution

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.
HTML
<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



After this, I would check, if I can change the table to a set of divs. As you are using Bootstrap allready, probably have a look at their Grid system.

- KM
   

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900