使用Angularjs的動態表格

我是Angularjs的新手。我試圖創建一個動態表，但表沒有生成，我注意到表單提交也無法正常工作。請看看並給我建議。使用Angularjs的動態表格

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

這裏是各自的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>

來源

2017-04-07 User12345

ng-submit應該在表格div –

@ User12345請問您接受我的回答，如果有幫助嗎？ – flow3r

@ flow3r接受隊友..歡呼 – User12345

你有一個錯字。
使用ng-controller而不是controller它會工作。

來源

2017-04-07 12:10:32 flow3r

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

簡單的方法做同樣的problem.By創建對象。

來源

2017-04-07 10:45:47

仍然不工作隊友... :-( – User12345

我發現了一些錯別字，並在這裏糾正。請檢查並讓我知道您的想法。 – User12345

@ User12345代碼正在工作，剛纔我檢查，複製並將代碼粘貼好。它會工作 –

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>

來源

2017-04-07 11:42:13 ketanmodi

使用Angularjs的動態表格

回答

相關問題