0
我有一個模式窗口中的表單，它以表格格式將新客戶添加到主頁面。這個表格有一個編輯按鈕。我以該模式形式加載與預填充值相同的表單。編輯任何字段值後的更新窗體AngularJs
現在，我想編輯任何字段，並在頁面上的表中更新相同。
這是我的代碼。
var app = angular.module("formList", ['ngMessages']);
app.controller("myCtrl", ['$scope', function($scope){
\t $scope.formElements = [];
$scope.editUser = false;
\t // $scope.jdDate = "";
\t var regexDate = /^([0-9]{2})\/([0-9]{2})\/([0-9]{4})$/;
\t // $scope.regex = regexDate;
\t $scope.regex = '\\d+';
\t $scope.dateCheck = function(user){
var regexDate = '/^([0-9]{2})\/([0-9]{2})\/([0-9]{4})$/';
// alert('I am here');
\t \t return regexDate.test(user.date);
\t } \t
$scope.mobileValidator = function(user){
//Mobile Number
var mobileRegex = /^[789]\d{9}$/;
if(mobileRegex.test(user.mobile)){
$scope.mobileValid = false;
}else{
$scope.mobileValid = true;
}
};
$scope.emailValidator = function(user){
//Email
var emailRegex = /^[a-z0-9!#$%&'*+/=?^_`{|}~.-][email protected]\.com$/i;
if(emailRegex.test(user.email)){
$scope.emailValid = false;
}else{
$scope.emailValid = true;
}
};
$scope.altMobValidator = function(user){
//Alternate Mobile no.
var mobileRegex = /^[789]\d{9}$/;
if(mobileRegex.test(user.altMobile)){
$scope.altMobileValid = false;
}else{
$scope.altMobileValid = true;
}
};
$scope.dobValidator = function(user){
//Alternate Mobile no.
var dobRegex = /^([0-9]{2})\/([0-9]{2})\/([0-9]{4})$/;
if(dobRegex.test(user.dob)){
$scope.dobValid = false;
}else{
$scope.dobValid = true;
}
};
$scope.pincodeValidator = function(user){
//Alternate Mobile no.
var pincodeRegex = /^([0-9]{6})$/;
if(pincodeRegex.test(user.pincode)){
$scope.pincodeValid = false;
}else{
$scope.pincodeValid = true;
}
};
\t $scope.addCustomer = function (user){
\t \t // $scope.formElements = angular.copy(user);
\t \t // angular.forEach(user, function(value, key){
\t \t // \t $scope.formElements.push(key + ': ' + value);
\t \t // })
\t \t $scope.formElements.push(
{
mobile: user.mobile,
name: user.firstName + user.lastName,
email: user.email,
altMobile: user.altMobile,
dob: user.dob,
gender: user.gender,
pincode: user.pincode,
address: user.address,
district: user.district,
state: user. state
}
);
\t \t
\t \t $scope.showResults = true;
\t \t
\t }
$scope.edit = function(){
$scope.editUser = true;
// $scope.formElements = angular.copy(user);
}
\t $scope.reset = function() {
$scope.user = angular.copy($scope.formElements);
};
$scope.delete = function(user, index) {
$scope.formElements.splice(index, 1);
}
$scope.updateCustomer = function(user){
//$scope.formElements = angular.copy(user);
$scope.formElements[index] = angular.copy(user); //UPDATED and worked but problem being that doesn't checks for null values.
angular.forEach(angular.copy(user), function(value, key){
if(value)
{
$scope.formElements[index].key = value;
}
});
}
}]);
// app.directive('overwriteEmail', function() {
// var EMAIL_REGEXP = /^[a-z0-9!#$%&'*+/=?^_`{|}~.-][email protected]\.com$/i;
// return {
// require: 'ngModel',
// restrict: '',
// link: function(scope, elm, attrs, ctrl) {
// // only apply the validator if ngModel is present and Angular has added the email validator
// if (ctrl && ctrl.$validators.email) {
// // this will overwrite the default Angular email validator
// ctrl.$validators.email = function(modelValue) {
// return ctrl.$isEmpty(modelValue) || EMAIL_REGEXP.test(modelValue);
// };
// }
// }
// };
// });
// app.directive('jdDate',function() {
// \t return {
// \t \t replace:true,
// \t \t scope:{
// \t \t \t jdModel:"="
// \t \t },
// \t \t template:"<input type='text' ng-model='abc' />",
// \t \t link:function (scope) {
// \t \t \t scope.jdModel = "123";
// \t \t }
// \t }
// })
app.directive('dateValidator', function() {
var dateregex = /^([0-9]{2})\/([0-9]{2})\/([0-9]{4})$/;
return {
require: 'ngModel',
restrict: '',
link: function(scope, elm, attrs, ctrl) {
// only apply the validator if ngModel is present and Angular has added the email validator
if (ctrl && ctrl.$validators.elm) {
ctrl.$validators.elm = function(modelValue) {
return ctrl.$isEmpty(modelValue) || dateregex.test(modelValue);
};
}
}
};
});/* Welcome to Compass.
* In this file you should write your main styles. (or centralize your imports)
* Import this file using the following HTML or equivalent:
* <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */
/* line 7, ../sass/screen.scss */
body {
padding: 40px;
}
/* line 10, ../sass/screen.scss */
p {
font-size: 15px;
}
/* line 13, ../sass/screen.scss */
table.table {
margin-top: 40px;
}
/* line 14, ../sass/screen.scss */
table.table th {
font-weight: bold;
}
/* line 19, ../sass/screen.scss */
table.table tr:nth-child(even) td {
background-color: #ECE7E7;
}
/* line 29, ../sass/screen.scss */
table.table .glyphicon.glyphicon-remove-circle {
font-size: 2em;
cursor: pointer;
}
/* line 38, ../sass/screen.scss */
form .list-inline > li {
display: inline-block;
padding-right: 5px;
padding-left: 5px;
float: left;
width: 50%;
}
/* line 45, ../sass/screen.scss */
form .input-group label {
padding-right: 10px;
}
/* line 47, ../sass/screen.scss */
form .input-group label input {
margin-right: 5px;
}
/* line 54, ../sass/screen.scss */
.glyphicon {
margin-right: 10px;
}
/* line 58, ../sass/screen.scss */
.error {
color: maroon;
}<html ng-app="formList">
<head>
<meta charset="UTF-8">
<title>Day 7 Angular Workaround</title>
<link href="css/styles.css" media="screen, projection" rel="stylesheet" type="text/css" />
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<script src="js/angular.js" type="text/javascript"></script>
<script src="https://code.angularjs.org/1.4.9/angular-messages.js"></script>
</head>
<body ng-controller="myCtrl">
<div class="container">
<button class="btn btn-info" data-toggle="modal" data-target="#customerModal"><span class="glyphicon glyphicon-user"></span>Add Customer</button>
<div class="modal fade" id="customerModal" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Add/Search Customer</h4>
</div>
<div class="modal-body">
<form id="form" name="form" novalidate>
<div class="col-sm-6">
<h3>Customer Details</h3>
<div class="form-group">
<label for="mobile">Mobile Number</label>
<div class="input-group">
<span class="input-group-addon">+91</span><input type="text" class="form-control" ng-model="user.mobile" placeholder="Enter phone Number..." ng-blur="mobileValidator(user)"/>
</div>
<!-- <div ng-show="form.$submitted || form.mobile.$touched"> -->
<span ng-show="mobileValid" class="error">Enter valid mobile no</span>
<!-- </div> -->
<!-- <span>Mobile valid = {{form.input.$valid}}</span> -->
</div>
<div class="form-group">
<label>Name(Optional)</label>
<ul class="list-inline">
<li><input type="text" class="form-control" ng-model="user.firstName" placeholder="First name" /></li>
<li><input type="text" class="form-control" ng-model="user.lastName" placeholder="Last name" /></li>
</ul>
</div>
<div class="form-group">
<label for="email">Email(optional)</label>
<input type="email" class="form-control" ng-model="user.email" ng-blur="emailValidator(user)" placeholder="Enter Email id here" />
<span ng-show="emailValid" class="error">Enter valid email</span>
</div>
<div class="form-group">
<label for="altMobile">Alternate contact No.(optional)</label>
<div class="input-group">
<span class="input-group-addon">+91</span> <input type="text" class="form-control" ng-model="user.altMobile" ng-blur="altMobValidator(user)" placeholder="Enter Alternate Mobile here" />
</div>
<span class="error" ng-show="altMobileValid">Enter valid contact no.</span>
</div>
<div class="form-group">
<label for="dob">Date Of birth(optional)</label>
<input type="text" class="form-control" ng-model="user.dob" ng-blur="dobValidator(user)" />
<span class="error" ng-show="dobValid">Enter Valid Dob</span>
</div>
<div class="form-group" id="gender">
<label>Gender(optional)</label>
<div class="input-group">
<label for="male"><input type="radio" ng-model="user.gender" name="gender" value="male" />Male</label>
<label for="female"><input type="radio" ng-model="user.gender" name="gender" value="female" />Female</label>
<label for="others"><input type="radio" ng-model="user.gender" name="gender" value="others" />Others</label>
</div>
</div>
</div>
<div class="col-sm-6">
<h3>Residential Address</h3>
<div class="form-group">
<label>Pincode(optional)</label>
<input type="text" class="form-control" name="pincode" ng-model="user.pincode" ng-blur="pincodeValidator(user)" placeholder="Enter Pincode" />
<span class="error" ng-show="pincodeValid">Enter Valid pincode.</span>
</div>
<div class="form-group">
<label for="address">Address(optional)</label>
<textarea ng-model="user.address" class="form-control" name="address" id="address" cols="30" rows="6" placeholder="Enter address details"></textarea>
</div>
<div class="form-group">
<label for="district">District(optional)</label>
<input type="text" ng-model="user.district" class="form-control" name="district" placeholder="Enter District here">
</div>
<div class="form-group">
<label for="district">State(optional)</label>
<input type="text" ng-model="user.state" class="form-control" name="state" placeholder="Enter State here">
</div>
<div class="form-group">
<label for="district">Country</label>
<input type="text" ng-model="user.country" class="form-control" value="india" name="country" placeholder="India(This service is only within India" disabled>
</div>
</div>
</form>
<div class="clearfix"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary" ng-click="addCustomer(user)"><span class="glyphicon glyphicon-user" ng-hide="editUser"></span> Add Customer</button>
<button type="button" class="btn btn-info" ng-click="updateCustomer(user)" ng-show="editUser">Update Customer</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<div id="showResults" ng-show="showResults" >
<table class="table table-responsive table-bordered table-striped">
<thead>
<tr>
<th>Name</th>
<th>Mobile</th>
<th>Email</th>
<th>Alternate Number</th>
<th>Date of Birth</th>
<th>Gender</th>
<th>Pincode</th>
<th>Address</th>
<th>District</th>
<th>State</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in formElements" class="active">
<!-- <td ng-click="editing=true"><span>{{item.name}}</span> <span class="glyphicon glyphicon-edit" ng-hide="editing"></span><input type="text" ng-model="item.name" ng-show="editing" ng-blur="editing=false" /></td> -->
<td ng-repeat="td in item">
<span>{{td}}</span>
<!-- <span class="glyphicon glyphicon-edit" ng-hide="editing"></span> -->
<!-- <input type="text" ng-model="td" ng-show="editing" ng-blur="editing=false" /> -->
</td>
<td><span class="glyphicon glyphicon-remove-circle action-btns" ng-click="delete(user, $index)"></span>
<button class="btn btn-default" data-toggle="modal" data-target="#customerModal" ng-click="edit()">Edit</button></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script type="text/javascript" src="js/final.js"></script>
</body>
</html>
我反映它的更新按鈕的點擊。事實上，我繼續並更新了結果。但問題是它不檢查空值，因此值會在表中移動它們的位置。我更新了我的答案以更新客戶功能。 – kushalvm
好的，你需要在'scope'中定義你的模型，例如：'$ scope.user = {mobile：null，firstName：null};'等等。在這種情況下，角將複製該字段。 –