为什么需要为 ng-submit 提供 ng-model 和 name?
Why do both ng-model and name need to be supplied for ng-submit?
在下面的代码中,我根据表单中的信息将客户添加到 table。
我发现 ng-submit
不会将表单变量发送到 addCustomer()
除非输入元素同时具有 ng-model
和 name
并且它们具有相同的名称,虽然我在任何地方都找不到这个记录。
为什么会这样?因为这似乎是多余的,我正确地传递了变量?
<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>
通常您会创建一个客户对象,然后将 ngModel 绑定到它的属性。
在您的 ngController 中,初始化您的新客户:
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>
在下面的代码中,我根据表单中的信息将客户添加到 table。
我发现 ng-submit
不会将表单变量发送到 addCustomer()
除非输入元素同时具有 ng-model
和 name
并且它们具有相同的名称,虽然我在任何地方都找不到这个记录。
为什么会这样?因为这似乎是多余的,我正确地传递了变量?
<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>
通常您会创建一个客户对象,然后将 ngModel 绑定到它的属性。
在您的 ngController 中,初始化您的新客户:
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>