編輯任何字段值AngularJs后更新表單

Question

我在模式窗口中有一個表單，該表單以表格格式將新客戶添加到主頁。 該表具有一個編輯按鈕。 我正在使用該模式形式的預填充值加載相同的形式。

現在，我想編輯任何字段並在頁面上的表中更新它。

這是我的代碼。

 var app = angular.module("formList", ['ngMessages']); app.controller("myCtrl", ['$scope', function($scope){ $scope.formElements = []; $scope.editUser = false; // $scope.jdDate = ""; var regexDate = /^([0-9]{2})\\/([0-9]{2})\\/([0-9]{4})$/; // $scope.regex = regexDate; $scope.regex = '\\\\d+'; $scope.dateCheck = function(user){ var regexDate = '/^([0-9]{2})\\/([0-9]{2})\\/([0-9]{4})$/'; // alert('I am here'); return regexDate.test(user.date); } $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!#$%&'*+/=?^_`{|}~.-]+@justdial\\.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; } }; $scope.addCustomer = function (user){ // $scope.formElements = angular.copy(user); // angular.forEach(user, function(value, key){ // $scope.formElements.push(key + ': ' + value); // }) $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 } ); $scope.showResults = true; } $scope.edit = function(){ $scope.editUser = true; // $scope.formElements = angular.copy(user); } $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!#$%&'*+/=?^_`{|}~.-]+@justdial\\.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 () { // return { // replace:true, // scope:{ // jdModel:"=" // }, // template:"<input type='text' ng-model='abc' />", // link:function (scope) { // scope.jdModel = "123"; // } // } // }) 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">&times;</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> 

Answer 1

如果要在模式窗口中進行的更改立即反映在表中，則需要使用相同的對象。

$scope.edit = function(us){
 $scope.editUser = true;
 $scope.user = us;}

和在HTML

<button class="btn btn-default" data-toggle="modal" data-target="#customerModal" ng-click="edit(item)">Edit</button>