使用Angularjs的动态表答案

【问题标题】：Dynamic Table using Angularjs使用Angularjs的动态表
【发布时间】：2017-09-02 17:15:18
【问题描述】：

我是 Angularjs 的新手。我试图创建一个动态表，但该表没有生成，我注意到表单提交也不起作用。请看看并给我建议。

<script>
    var app =angular.module("myApp",[]);
    app.controller("myCtrl",function($scope) { 
        $scope.students = [{
            'name' : 'ab',
            'email' : 'ab@gmail.com',
            '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>

这是相应的 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>

【问题讨论】：

ng-submit 应该在表单 div 内
@User12345 如果对您有帮助，请您接受我的回答吗？
@flow3r 接受队友..干杯

标签： javascript angularjs forms html-table

【解决方案1】：

你有一个错字。
使用ng-controller 而不是controller 就可以了。

【讨论】：

【解决方案2】：

   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>

【讨论】：

【解决方案3】：

    <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' : 'ab@gmail.com',
            'dept' : 'cse' 
        }];

      $scope.user = {};

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

    });
</script>

解决同样问题的简单方法。通过创建对象。

【讨论】：

我发现了一些错别字并在这里更正。请检查并告诉我您的想法。
@User12345 代码正在运行，刚才我检查过，正确复制并粘贴代码。肯定会运行