0

在以下代码中，我根据表单中的信息将客户添加到表中。

我发现除非输入元素同时具有两者并且它们都具有相同的名称，否则ng-submit不会将表单变量发送到，尽管我在任何地方都找不到此文档。addCustomer()ng-modelname

为什么会这样？而且由于这似乎是多余的，并且我正确地传递了变量？

<html ng-app="mainModule">
    <head>
        <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
        <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
    </head>    
    <body ng-controller="mainController" style="padding: 20px 0">

        <div class="col-lg-12">

            <div class="panel panel-success" style="width: 500px">
                <div class="panel-heading">Add Customer</div>
                <div class="panel-body">
                    <form ng-submit="addCustomer()" role="form">
                        <div class="form-group">
                            <label for="firstName">First Name:</label>
                            <input type="text" class="form-control" ng-model="firstName" name="firstName"/>
                        </div>
                        <div class="form-group">
                            <label for="lastName">Last Name:</label>
                            <input type="text" class="form-control" ng-model="lastName" name="lastName"/>
                        </div>
                        <button type="submit" class="btn btn-default">Add</button>
                    </form>
                </div>
            </div>
            <div class="panel panel-info" style="width: 500px">
                <div class="panel-heading">Customers</div>
                <table class="table-striped table-bordered table table-hover">
                    <tr>
                        <th>ID</th>
                        <th>First Name</th>
                        <th>Last Name</th>
                    </tr>
                    <tr ng-repeat="customer in customers">
                        <td>{{customer.id}}</td>
                        <td>{{customer.firstName}}</td>
                        <td>{{customer.lastName}}</td>
                    </tr>
                </table>
            </div>

        </div>
        <script>
                    var mainModule = angular.module('mainModule', []);
                            function mainController($scope) {
                                $scope.idCount = 1;
                                $scope.customers = [];

                                $scope.addCustomer = function () {
                                    $scope.customers.push({id: $scope.idCount++, firstName: this.firstName, lastName: this.lastName});

                                };
                            }
        </script>
    </body>
</html>
4

1 回答 1

1

通常你会创建一个客户对象，然后将 ngModel 绑定到它的属性。

在您的 ngController 中，初始化您的 newCustomer：

 var mainModule = angular.module('mainModule', []);
 mainModule.controller('mainController', function ($scope) {
       $scope.idCount = 1;
       $scope.customers = [];
       $scope.newCustomer = { id: $scope.idCount, firstName:'', lastName:''};
       $scope.addCustomer = function (customer) {       
            $scope.customers.push(customer);
            $scope.newCustomer = { id:++$scope.idCount, firstName:'', lastName:''}; 

       }; 
 }

在您的 HTML 中，将 ngModel 绑定到客户的名字和姓氏属性 - 除非您需要进行表单验证，否则不需要 name 属性。

<form ng-submit="addCustomer(newCustomer)" role="form">
       <div class="form-group">
            <label for="firstName">First Name:</label>
            <input type="text" class="form-control" ng-model="newCustomer.firstName" />
        </div>
        <div class="form-group">
            <label for="lastName">Last Name:</label>
            <input type="text" class="form-control" ng-model="newCustomer.lastName"/>
        </div>
        <button type="submit" class="btn btn-default">Add</button>
</form>
于 2015-01-07T14:00:35.053 回答