如何使用angularjs通过控制器将数组数据和用户输入的数据传递到数据库
<!doctype html>
<html lang="en">
<head>
<script src="../../assets/js/angularjs/angular.min.js"></script>
<script src="../../assets/js/angular-ui-bootstrap-0.9.0/ui-bootstrap-tpls.min.js"></script>
<script src="../../assets/js/jquery-ui.js"></script>
<script src="../../assets/js/bootstrap.min.js"></script>
<script src="angularjs/script.js"></script>
<script src="../../assets/js/paginationjs/dirPagination.js"></script>
</head>
<body data-ng-cloak data-ng-app="UserModule" data-ng-controller="UserController" ng-init="GetOutlet();GetCategory();GetTables()">
<div class="wrapper">
<div class="main-panel">
<div class="content">
<div class="container-fluid">
<div class="page-title">
<div class="content">
<div class="row" style="margin-right: 0px;">
<div class="col-sm-8 no-pad-left">
<h3>New Order</h3>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<div class="card noborder-card">
<div class="content">
<!-- ************* Add User Modal start *************-->
<form role="form" id="AddUserForm" name="AddUserForm" autocomplete="off" enctype="multipart/form-data" novalidate="" data-ng-submit="AddOrderData(AddUser)">
<div class="card popup-card">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4"> </div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
<h3 class="text-center">{{OutletName}}</h3>
<hr>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4"> </div>
</div>
<div ng-show="NewOrderDiv">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4"> </div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
<div class="form-group">
<label class="control-label" for="restaurant" style="display: -webkit-inline-box;">
<input type="checkbox" class="form-control border-input" id="parcel" name="parcel" data-ng-model="parcel" /> Parcel </label>
<div class="error" data-ng-show="submitted || AddUserForm.parcel.$dirty && AddUserForm.parcel.$invalid">
<small class="error" data-ng-show="AddUserForm.parcel.$error.required">Parcel is required.</small>
</div>
</div>
<div ng-if="parcel">
<div class="form-group">
<label class="control-label" for="Name"> Name <span class="error">*</span></label>
<input class="form-control border-input" type="text" id="personname" name="username" required data-ng-model="$parent.personname" data-ng-minlength="3" pattern="^[a-zA-Z- .]+" >
<div class="error" data-ng-show="submitted || AddUserForm.personname.$dirty && AddUserForm.username.$invalid">
<small class="error" data-ng-show="AddUserForm.personname.$error.required">Name is required.</small>
<small class="error" data-ng-show="AddUserForm.personname.$error.minlength">Name is required to be at least 3 characters</small>
<small class="error" data-ng-show="AddUserForm.personname.$error.pattern">Name should be alphabetic.</small>
<small class="error" data-ng-show="UserNameExists">Name already Exists.</small>
</div>
</div>
<div class="form-group">
<label class="control-label" for="contactno">Contact # <span class="error">*</span></label>
<input class="form-control border-input" type="text" id="contactno" name="contactno" maxlength="10" data-ng-model="$parent.contactno" data-ng-minlength="10" data-ng-maxlength="10" pattern="[6-9]{1}[0-9]{9}" required="" data-ng-change="CheckContact()"/>
<div class="error" data-ng-show="submitted || AddUserForm.contactno.$dirty && AddUserForm.contactno.$invalid">
<small class="error" data-ng-show="AddUserForm.contactno.$error.required">Contact # is required.</small>
<small class="error" data-ng-show="AddUserForm.contactno.$error.minlength">Contact # is required to be at least 10 characters</small>
<small class="error" data-ng-show="AddUserForm.contactno.$error.maxlength">Contact # cannot be longer than 10 characters</small>
<small class="error" data-ng-show="AddUserForm.contactno.$error.pattern">Contact # must be number only & start from 6-9</small>
<small class="error" data-ng-show="ContactExists">Contact # already exists</small>
</div>
</div>
</div>
<div ng-if="!parcel">
<div class="form-group">
<label class="control-label" for="Table No">Table No <span class="error">*</span></label>
<select class="form-control border-input" type="text" id="tableno" name="tableno" ng-model="$parent.tableno" required >
<option value="">Select</option>
<option ng-repeat="table in TablesArray" value="{{table.TableId}}">{{table.TableName}}</option>
</select>
<div class="error" data-ng-show="submitted || AddUserForm.tableno.$dirty && AddUserForm.tableno.$invalid">
<small class="error" data-ng-show="AddUserForm.tableno.$error.required">Table No is required.</small>
</div>
</div>
<div class="form-group">
<label class="control-label" for="PAX">PAX <span class="error">*</span></label>
<input class="form-control border-input" type="text" id="pax" name="pax" ng-model="$parent.pax" data-ng-pattern="/^[0-9]*$/" required >
<div class="error" data-ng-show="submitted || AddUserForm.pax.$dirty && AddUserForm.pax.$invalid">
<small class="error" data-ng-show="AddUserForm.pax.$error.required">PAX is required.</small>
<small class="error" data-ng-show="AddUserForm.pax.$error.pattern">PAX should be numeric ex:1234567890</small>
</div>
</div>
</div>
<div class="row" ng-repeat="cat in CategoryItems">
<div class="col-md-12">
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<span ng-click="GetItems(cat.CategoryId,$index)"><a data-toggle="collapse" href="#collapse{{cat.PkId}}"><input type="hidden" value="{{cat.CategoryId}}">{{cat.CategoryName}}</a></span>
</h4>
</div>
<div id="collapse{{cat.PkId}}" class="panel-collapse collapse">
<div class="panel-body">
<div class="tank-card tank-sectoin">
<div class="row">
<div class="col-md-6">
<strong>ItemName</strong>
</div>
<div class="col-md-6">
<strong>Quantity</strong>
</div>
</div>
<span ng-repeat="item in ItemsArray[$index]">
<div class="row">
<div class="col-md-6">
<input type="hidden" value="{{item.ItemId}}">
<input type="hidden" value="{{item.CatId}}">
{{item.ItemId}}
</div>
<div class="col-md-6">
<input class="form-control border-input" type="text" id="quantity" name="quantity{{$index}}" ng-model="cat.quantity"
data-ng-pattern="/^[0-9]*$/" >
<div class="error" data-ng-show="submitted || AddUserForm.quantity{{$index}}.$dirty && AddUserForm.quantity{{$index}}.$invalid">
<small class="error" data-ng-show="AddUserForm.quantity{{$index}}.$error.required">Quantity is required.</small>
<small class="error" data-ng-show="AddUserForm.quantity{{$index}}.$error.pattern">Quantity should be numeric ex:1234567890</small>
</div>
</div>
</div>
</span>
</div>
</div>
<!--<div class="panel-footer">Panel Footer</div>-->
</div>
</div>
</div>
</div>
</div>
<hr>
<div class="row">
<div class="text-center">
<button type="submit" data-ng-hide="submitbtn" class="btn btn-success">ORDER SUMMERY</button>
<button type="button" class="btn btn-info" data-ng-click="GoBack()">BACK</button>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4"> </div>
</div> <!--row end-->
</div>
</div> <!-- card end-->
<div class="alert alert-danger alert-dismissable" data-ng-show="showWarningAlert">
<button type="button" class="close" data-ng-click="switchBool('showWarningAlert')">×</button><strong> {{WarningAlert}}</strong>
</div>
<div class="alert alert-success alert-dismissable" data-ng-show="showSuccessAlert">
<button type="button" class="close" data-ng-click="switchBool('showSuccessAlert')">×</button>
<strong> {{SuccessAlert}}</strong>
</div>
<div class="clearfix"></div>
</form> <!--form end-->
<!-- ****************Add User Modal start **********-->
</div><!-- content-->
</div><!--card-->
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
//// js从这里开始
var ListUsers = angular.module("UserModule", ['angularUtils.directives.dirPagination','ui.bootstrap'])
ListUsers.controller("UserController", function ($scope, $timeout, $http, jsonFilter)
{
$scope.NewOrderDiv = true;
$scope.FinalOrderDiv = true;
$scope.showWarningAlert = false;
$scope.showSuccessAlert = false;
var logResult = function (data, status, headers, config)
{
return data;
};
$scope.GetCategory= function()
{
$http.get("get_category_data.php").success(function(data)
{
$scope.query = {}
$scope.queryBy = '$';
$scope.CategoryItems = data;
if(data=="null")
{
$scope.ViewRecords = false;
}
else
{
$scope.ViewRecords = true;
}
});
}
$scope.GetOutlet= function()
{
$http.get("load_outlets.php").success(function(data)
{
$scope.OutletName = data;
});
}
$scope.ItemsArray = [];
$scope.GetItems= function(CategoryId,index)
{
$http.post("get_category_wise_items.php", { 'CategoryId': CategoryId })
.success(function(data)
{
$scope.ItemsArray[index] = data;
});
}
$scope.TablesArray = [];
$scope.GetTables= function()
{
$http.get("get_category_wise_tables.php")
.success(function(data)
{
$scope.TablesArray = data;
});
}
$scope.AddOrderData = function ()
{
$scope.submitted = true;
var CatId=new Array();
var ItemId=new Array();
var quantity=new Array();
for( var i = 0; i < $scope.CategoryItems.length; i++ )
{
CatId.push($scope.CategoryItems[i].CatId);
ItemId.push($scope.CategoryItems[i].ItemId);
quantity.push($scope.CategoryItems[i].quantity);
}
alert($scope.CatId);
alert($scope.ItemId);
alert($scope.quantity);
alert(CatId);
alert(ItemId);
alert(quantity);
$http.post('order_process.php',{'parcel':$scope.parcel,'personname':$scope.personname,'contactno':$scope.contactno,'tableno':$scope.tableno,'pax':$scope.pax})
.success(function (data, status, headers, config)
{
if(data=="Success")
{
$scope.SuccessAlert = "User added successfully";
$scope.showSuccessAlert = true;
$scope.showWarningAlert = false;
$scope.AddUser = {};
$scope.AddUserForm.$setPristine();
$scope.AddUserForm.$setUntouched();
$timeout(function () { $scope.showSuccessAlert = false;
$scope.ShowAddOutlet = false;
window.location.href="list-users.php"}, 1000);
}
else
{
$scope.WarningAlert = data;
$scope.showWarningAlert = true;
$timeout(function () { $scope.showWarningAlert = false; $scope.submitted = false;}, 5000);
}
})
.error(function (data, status, headers, config)
{
$scope.WarningAlert = logResult(data, status, headers, config);
});
};
$scope.switchBool = function (value) {
$scope[value] = !$scope[value];
};
});
请找到附件。
这里的类别和项目是从数据库动态获取的。
像ng-repeat =“ cat在CategoryItems中一样调用”
使用GetItems（cat.CategoryId，$ index）函数从数据库中获取项目
ng-repeat =“ ItemsArray [$ index]中的项目”
这里的问题是，如果用户为一项输入数量（输入），它将申请剩余项（输入）。
，并且也无法将用户输入的输入字段（即，所关注类别的（ItemId，Quantity））传递到控制器中。
我想将上述数据保存到数据库中。
请帮助我们。
先谢谢您
0 个答案:
没有答案
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？