1

I am new to Angularjs. I tried to create a dynamic table but the table is not generated and I noticed that the form submit also not working. Please have a look and advise me. 

<script>
    var app =angular.module("myApp",[]);
    app.controller("myCtrl",function($scope) { 
        $scope.students = [{
            'name' : 'ab',
            'email' : '[email protected]',
            'dept' : 'cse' 
        }];

        $scope.addStudent = function(){
            console.log('addStudent');
            $scope.students.push( {
                'name' : $scope.name,
                'email' : $scope.email,
                'dept' : $scope.dept
            });
            $scope.name = '';   
            $scope.email = '';
            $scope.dept = '';
        };

    });
</script>

Here is the respective html.

<body>
    <div ng-app = "myApp" controller="myCtrl">
        <div class = "form-group" >
             <form class = "student-form" ng-submit="addStudent()">
                <div class = "row">
                    <label class = "col-md-6" for= "name"> Name :</label>
                    <input class = "col-md-6" type ="text" ng-model="name"  class="validate" required>
                </div>
                <div class = "row">
                    <label class = "col-md-6" for= "email"> Email :</label>
                    <input class = "col-md-6" type ="email" ng-model="email" class="validate" required>
                </div>
                <div class = "row" >
                    <label for= "dept" class = "col-md-6"> Department :</label>
                    <input class = "col-md-6" type ="text" ng-model="dept" class="validate" required>
                </div>
                <div class = "row"> 
                <!--    <button type="button" class="btn btn-success col-sm-6" ng-click= addStudent()>Add</button>          
                        <button type="button" class="btn btn-danger col-sm-6" ng-click = reset()>Reset</button>         -->
                    <input type="submit" value="Submit" class="btn btn-success"/>
                </div>  
                {{name + ' ' + email +' ' + dept }}

             </form>
        </div>

        <div class = "table-responsive">

            <table class="table">
                <thead >
                    <tr class="success">
                        <td> Name </td>
                        <td> Email</td>
                        <td> Department </td>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="x in students">
                        <td>{{ x.name }}</td>
                        <td>{{ x.email }}</td>
                        <td>{{ x.dept }}</td>
                    </tr>
                <tbody>
            </table>                
        </div>
    </div>

</body>
Improve this question
3
  • ng-submit should be inside form div Commented Apr 7, 2017 at 10:45
  • @User12345 Would you, please, accept my answer, if it helped you? Commented Apr 21, 2017 at 9:19
  • 1
    @flow3r Accepted mate..Cheers Commented Apr 22, 2017 at 5:53

3 Answers 3

Reset to default
1

You've got a typo.
Use ng-controller instead of controller and it will work.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0 
   Directive ng-app & ng-controller code
   HTML
   <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">
   <html ng-app="helloApp">
   <head>
   <title>Hello AngularJS - Add Table Row Dynamically</title>
   <link rel="stylesheet"   href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
   <script
    src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">  </script>
   <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js"></script>
<script src="assets/js/controllers.js"></script>
</head>
<!-- Controller name goes here -->
<body ng-controller="CompanyCtrl">
...
</body>
</html>

Controller CompanyCtrl code in controller.js            
<script>
var helloApp = angular.module("helloApp", []);
helloApp.controller("CompanyCtrl", function($scope) {
$scope.companies = [];
$scope.addRow = function(){     
    $scope.companies.push({ 'name':$scope.name, 'email': $scope.email,  'department':$scope.department});
    $scope.name='';
    $scope.email='';
    $scope.department='';

};
)};
</script>
 Directive ng-repeat code
 <table class="table">
<tr>
    <th>name
    </th>
    <th>email
    </th>
    <th> department
    </th>

</tr>
<tr ng-repeat="company in companies">
    <td>{ {company.name}}
    </td>
    <td>{ {company.email}}
    </td>
    <td>{ {company.department}}
    </td>

</tr>
</table>

**Directive ng-submit code**

<form class="form-horizontal" role="form" ng-submit="addRow()">
<div class="form-group">
    <label class="col-md-2 control-label">name</label>
    <div class="col-md-4">
        <input type="text" class="form-control" name="name"
            ng-model="name" />
    </div>
</div>
<div class="form-group">
    <label class="col-md-2 control-label">email</label>
    <div class="col-md-4">
        <input type="text" class="form-control" name="email"
            ng-model="email" />
    </div>
</div>
<div class="form-group">
    <label class="col-md-2 control-label">department</label>
    <div class="col-md-4">
        <input type="text" class="form-control" name="department"
            ng-model="department" />
    </div>
</div>

<div class="form-group">                                
    <div style="padding-left:110px">
        <input type="submit" value="Submit" class="btn btn-primary"/>
    </div>
</div>
Improve this answer

Comments

0 
    <body>
        <div ng-app = "myApp" ng-controller="myCtrl">
        <div class = "form-group" >
             <form ng-submit="addStudent()" class = "student-form">
                <div class = "row">
                    <label class = "col-md-6" for= "name"> Name :</label>
                    <input class = "col-md-6" type ="text" ng-model="user.name"  class="validate" required>
                </div>
                <div class = "row">
                    <label class = "col-md-6" for= "email"> Email :</label>
                    <input class = "col-md-6" type ="email" ng-model="user.email" class="validate" required>
                </div>
                <div class = "row" >
                    <label for= "dept" class = "col-md-6"> Department :</label>
                    <input class = "col-md-6" type ="text" ng-model="user.dept" class="validate" required>
                </div>
                <div class = "row"> 
                <!--    <button type="button" class="btn btn-success col-sm-6" ng-click= addStudent()>Add</button>          
                        <button type="button" class="btn btn-danger col-sm-6" ng-click = reset()>Reset</button>         -->
                    <input type="submit" value="Submit" class="btn btn-success"/>
                </div>  
                {{name + ' ' + email +' ' + dept }}

             </form>
        </div>

        <div class = ""table-responsive">

            <table class="table">
                <thead >
                    <tr class="success">
                        <td> Name </td>
                        <td> Email</td>
                        <td> Department </td>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="x in students">
                    <td>{{ x.name }}</td>
                    <td>{{ x.email }}</td>
                    <td>{{ x.dept }}</td>
                    </tr>
                <tbody>
            </table>                
        </div>

    </body>

JS:

<script>
    var app =angular.module("myApp",[]);
    app.controller("myCtrl",function($scope) { 
        $scope.students = [{
            'name' : 'ab',
            'email' : '[email protected]',
            'dept' : 'cse' 
        }];

      $scope.user = {};

        $scope.addStudent = function(){
            console.log('addStudent');
            $scope.students.push($scope.user);
            $scope.user = {};
        };

    });
</script>

Easy way to do the same problem.By creating object.

Improve this answer

2 Comments

I found some typos and corrected here.Please check and let me know your thoughts.
@User12345 code is working ,just now i checked,copy and paste the code properly.surely it will work

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.