BoldSignEasily embed eSignatures in your .NET applications. Free sandbox with native SDK available.
Hi Tejaswini,
Thanks for using Syncfusion products,
We have analyzed your code snippet. We have prepared the sample with model dialog based on your requirement (model dialog in angular js).
Please get the sample from below location
In this sample, we have defined the dialog area using ‘ng-include’ within ‘dialog_ctrl’. Please refer the below code snippet
<div id="basicDialog" ng-controller="dialog_ctrl"> <form id="details">
<div ng-include="'EditEmployee.html'"></div><br /> <button type="submit" ej-button ng-click="update(username)">Update</button> <button type="button" ej-button ng-click="closeDialog()">Cancel</button> <button type="reset" ej-button >Clear all values</button> </form> |
In Edit Employee html file we have included form fields from three different html pages(using ng-include). Please refer the below code snippet
<h3>Basic Info</h3> <div ng-include="'BasicInfo.html'"></div> <h3>Contact Info</h3> <div ng-include="'ContactInfo.html'"></div> <h3>Other Info</h3> <div ng-include="'OtherInfo.html'"></div> |
In other controller(basic_controller) we have provided the one textbox to enter the user name (whose details we want to edit). Based on the given user name value, the details will be loaded in dialog’s form fields. In this we have used ‘$broadcast’ service to dispatch the function between two controllers.
Please refer the below code snippet.
$scope.dialogopen = function (user) { $("#basicDialog").ejDialog("open"); $scope.$broadcast('getuserinfo',user); } |
$scope.$on('getuserinfo', function (event,user) { for (i = 0; i < $scope.employee.length; i++) if ($scope.employee[i].username == user) { $scope.username = $scope.employee[i].user; $scope.fname = $scope.employee[i].fname; $scope.lname = $scope.employee[i].lname; $scope.gender = $scope.employee[i].gender; $scope.dob = $scope.employee[i].dob;; $scope.add = $scope.employee[i].add; $scope.city = $scope.employee[i].city; $scope.pin = $scope.employee[i].pin; $scope.no = $scope.employee[i].no; $scope.bloodgroup = $scope.employee[i].bloodgroup; $scope.pancard = $scope.employee[i].pancard; $scope.passport = $scope.employee[i].passport; } }); |
Also we have provide the three option (update, clear(reset),cancel) in dialog. Modified details will be updated in list (local data source) when we click the “update” button.
Please check with the given sample and let us know if you have further queries.
Regards,
HiTejaswini,
Thanks for the update
We have analyzed your requirement(when I click on 'edit profile' button 'basic info, contact info, other details' should open in respective tabs in a modal). We have achieved your requirement using our tab control.
In editemployee.html file we have included the other html files (basicinfo ,otherinfo, contactInfo) based on the tab Structure control.
Please refer the below code snippet
[editemployee.html] <divid="Div1"> <ul> <li><arel='nofollow' href="#BasicInfo">Basic Info</a></li> <li><arel='nofollow' href="#ContactInfo">ContactInfo</a></li> <li><arel='nofollow' href="#OtherInfo">OtherInfo</a></li> </ul> <divid="BasicInfo"ng-include="'BasicInfo.html'"></div> <divid="ContactInfo"ng-include=" 'ContactInfo.html' "></div> <divid="OtherInfo"ng-include=" 'OtherInfo.html' "></div> </div> |
While opening the dialog in home page we have create tab control. Please find the below code snippet
[script] $scope.dialogopen =function(user) { $("#basicDialog").ejDialog("open"); $("#tab").ejTab(); $scope.$broadcast('getuserinfo', user); } |
For your convenience, we have modified the existing sample based on this. Please get the sample from below location.
Please check with the given sample and let us know if you have further queries.
Regards,
Sasikala Nagarajan
Hi Tejaswini,
We have analyzed your query (when i click on 'edit profile' link only the empty modal is loaded). We have created sample based on your requirement. We are unable to reproduce the reported issue. The html pages (included using ng-include) loaded correctly.
Please find the sample from location:
In this sample we have used local data for form fields. Also we have used factory function to call the one controller’s function from another controller (instead of using $broadcast service to call another controller function). Please refer the below code snippet.
[script] myApp.factory("UserService", function () { var UserService = { getuser: function (localdata,user) { angular.element('#basicDialog').scope().getuserinfo(localdata,user); }, } return UserService; }); |
Please check the given sample comparing with your project and let us know if it helps. If still you are facing the problem, please revert us with replication procedure. So that we can provide you with a better solution.
Regards,
Sasikala Nagarajan