Question

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

Answer 1

你有一个错字。
使用[[DarkUIButton appearance] setBackgroundColor:scheme.darkcolor]; [[MediumUIButton appearance] setBackgroundColor:scheme.mediumcolor]; [[LightUIButton appearance] setBackgroundColor:scheme.lightcolor];代替ng-controller，它会起作用。

Answer 2

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

轻松解决同样的问题。通过创建对象。

Answer 3

   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>

使用Angularjs的动态表

3 个答案: