How to work with modaldialog in angularjs | jQuery Forums

TE Tejaswini March 9, 2015 11:48 AM UTC

I have worked with modal in angularjs and want to replace angularjs modal with syncfusion dialogmodal. here is my code for angularjs modal,

ModalController.js

app.controller('ModalOpenController', function ($scope, $modal) {

$scope.openEditEmployeeModal = function () {

var modalInstance = $modal.open({

templateUrl: '../view/employee/edit/EditEmployee.html',

controller: 'EmployeeEditController',

windowClass: 'center-modal',

resolve: {

items: function () {

return $scope.items;

}

});

};

});

EditEmployee.html

<h5 style="padding: 5px;"><b>Edit Profile</b></h5>

</div>

<br />

</tab>

<br />

</tab>

<br />

</tab>

</tabset>

</div>

<button ej-button e-size= "small" ng-click="$close()">Cancel</button>

</div>

</form>

Here, i included html pages for editing basic, contact and other information. and when the user clecks 'edit profile' button modal is opened which has three tabs one for editing basic information, second one for editing contact details and third one for editing other details. I have displayed edited information on user detail page(view) using angularjs expressions. e.g.{{employee.firstname}}, {{employee.lastname}} etc. etc..

EmployeeEditController.js code is,

app.controller('EmployeeEditController', function ($scope, $localStorage, $filter, $modal, $location, EmployeeService) {

$scope.employee =

{

firstname: "",

lastname: "",

gender: "",

birthdate: "",

address: "",

city: "",

pincode: "",

mobileno: "",

homephone: "",

email: "",

personalemail: "",

bloodgroup: "",

pancardno: "",

passportno: "",

emergencyname: "",

contactno: ""

};

//array of bloodgroup

$scope.d1 = $scope.employee.birthdate;

$scope.regularize_status = [{ text: "Applied", value: "Applied" }, { text: "Discard", value: "Discard" }];

$scope.bloodgroupList = ['A+', 'A-', 'B+', 'B-', 'AB+', 'AB-','O+', 'O-'];

$scope.BloodGroup_List = $scope.bloodgroup;

//Birth date format changed to 5 Feb 2012 using $filter

$scope.changeformat = function () {

$scope.employee.birthdate = $filter('date')($scope.employee.birthdate, "dd MMM yyyy");

};

$scope.phoneNumber = /^[789]\d{9}$/;

//Get the username from login page

$scope.UserName = "";

var Login_Details = JSON.parse(localStorage.getItem('Login Details'));

if (Login_Details != undefined && Login_Details != '') {

$scope.UserName = Login_Details.username;

}

//Get the localstorage values for employee

var list = JSON.parse(localStorage.getItem('employee'));

if (list != undefined && list != '') {

$scope.employee = list;

}

$scope.update = function (employee) {

$scope.employee.firstname = employee.firstname;

$scope.employee.lastname = employee.lastname;

$scope.employee.gender = employee.gender;

$scope.employee.birthdate = employee.birthdate;

$scope.employee.address = employee.address;

$scope.employee.city = employee.city;

$scope.employee.pincode = employee.pincode;

$scope.employee.mobileno = employee.mobileno;

$scope.employee.homephone = employee.homephone;

$scope.employee.email = employee.email;

$scope.employee.personalemail = employee.personalemail;

$scope.employee.bloodgroup = employee.bloodgroup;

$scope.employee.pancardno = employee.pancardno;

$scope.employee.passportno = employee.passportno;

$scope.employee.emergencyname = employee.emergencyname;

$scope.employee.contactno = employee.contactno;

EmployeeService.setEmployee(employee); //employee object passed to EmployeeService

localStorage.setItem('employee', JSON.stringify($scope.employee));//set the values in localstorage

};

//use $watch display edited employee properties to view without page refresh

$scope.$watch(function () {

var Employee = EmployeeService.Employee;

if (Employee !== null) {

$scope.employee = Employee;

}

return $scope.employee;

});

How can implement the same using syncfusion dialog modal to edit user profile

SN Sasikala Nagarajan Syncfusion Team March 10, 2015 12:58 PM UTC

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

Sample

In this sample, we have defined the dialog area using ‘ng-include’ within ‘dialog_ctrl’. Please refer the below code snippet

<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>

<h3>Contact Info</h3>

<h3>Other Info</h3>

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,

Sasikala Nagarajan

TE Tejaswini March 13, 2015 01:05 PM UTC

Hi Sasikala,

Thank you or your answer. I have worked with above sample. But, what i want here is,when i click on 'edit profile' button 'basic info, contact info, other details' should open in respective tabs in a modal. And after editing the fields, when i click on update button, the modal must be closed. How can i fix these problems?

Thank you.

SN Sasikala Nagarajan Syncfusion Team March 16, 2015 01:17 PM UTC

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.

Sample

Please check with the given sample and let us know if you have further queries.

Regards,

Sasikala Nagarajan

TE Tejaswini March 18, 2015 09:37 AM UTC

Hi Sasikala,

I worked with the solution given above. But the problem is when i click on 'edit profile' link only the empty modal is loaded. The html pages for Basic, contact and other information are not getting loaded. Here is my employee detail page in which there is link for 'edit profile'.

In the employeeDeatail.html file i have written,

</div>

</div>

EditEmployee.html

<ul>

<li><a rel='nofollow' href="#BasicInfo">Basic</a></li>

<li><a rel='nofollow' href="#ContactInfo">Contact</a></li>

<li><a rel='nofollow' href="#OtherInfo"> Other</a></li>

</ul>

</div>

<button ej-button e-size= "small" ng-click="cancel(employee)">Cancel</button>

</div>

And I have written seperate controller for dialog open as,

app.controller('ModalOpenController', function ($scope, $modal, $rootScope) {

$(function () {

$("#basicDialog").ejDialog({

showOnInit: false,

enableModal: true,

open: "dialogopen",

title: "Employee details",

});

$("#tab").ejTab();

$scope.dialogopen = function (user) {

$("#basicDialog").ejDialog("open");

$("#tab").ejTab({ selectedItemIndex: 0 });

$scope.$broadcast('getuserinfo');

}

});

And in the EditEmployeeController, I have written,

app.controller('EmployeeEditController', function ($scope, $localStorage, $rootScope, $filter, $modal, $location, EmployeeService) {

$scope.employee =

{

firstname: "",

lastname: "",

gender: "",

birthdate: "",

address: "",

city: "",

pincode: "",

mobileno: "",

homephone: "",

email: "",

personalemail: "",

bloodgroup: "",

pancardno: "",

passportno: "",

emergencyname: "",

contactno: ""

};

//$scope.firstname = "";

//$scope.birthdate = "";

//array of bloodgroup

//$scope.$on('ProfileDialogOpen', function (event) {

// obj = $(".e-dialog.e-js").data("ejDialog");

// if (obj)

// obj.open();

//});

$scope.d1 = $scope.employee.birthdate;

$scope.regularize_status = [{ text: "Applied", value: "Applied" }, { text: "Discard", value: "Discard" }];

$scope.bloodgroupList = ['A+', 'A-', 'B+', 'B-', 'AB+', 'AB-', 'O+', 'O-'];

//$scope.bloodgroup = [{ Id: "1", value: "O+" },

// { Id: "2", value: "O-" },

// { Id: "3", value: "A+" },

// { Id: "4", value: "A-" },

// { Id: "5", value: "B+" },

// { Id: "6", value: "B-" },

// { Id: "7", value: "AB+" },

// { Id: "8", value: "AB-" }];

$scope.BloodGroup_List = $scope.bloodgroup;

//Birth date format changed to 5 Feb 2012 using $filter

$scope.changeformat = function () {

$scope.employee.birthdate = $filter('date')($scope.employee.birthdate, "dd MMM yyyy");

};

$scope.phoneNumber = /^[789]\d{9}$/;

//Get the username from login page

$scope.UserName = "";

var Login_Details = JSON.parse(localStorage.getItem('Login Details'));

if (Login_Details != undefined && Login_Details != '') {

$scope.UserName = Login_Details.username;

}

//Get the localstorage values for employee

var list = JSON.parse(localStorage.getItem('employee'));

if (list != undefined && list != '') {

$scope.employee = list;

}

$scope.$on('getuserinfo', function (event) {

for (i = 0; i < $scope.employee.length; i++)

//if ($scope.employee[i].username == user) {

$scope.employee.user = $scope.employee[i].username;

$scope.employee.firstname = $scope.employee[i].firstname;

//$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;

//}

});

$scope.update = function (employee) {

$scope.employee.firstname = employee.firstname;

$scope.employee.lastname = employee.lastname;

$scope.employee.gender = employee.gender;

$scope.employee.birthdate = employee.birthdate;

$scope.employee.address = employee.address;

$scope.employee.city = employee.city;

$scope.employee.pincode = employee.pincode;

$scope.employee.mobileno = employee.mobileno;

$scope.employee.homephone = employee.homephone;

$scope.employee.email = employee.email;

$scope.employee.personalemail = employee.personalemail;

$scope.employee.bloodgroup = employee.bloodgroup;

$scope.employee.pancardno = employee.pancardno;

$scope.employee.passportno = employee.passportno;

$scope.employee.emergencyname = employee.emergencyname;

$scope.employee.contactno = employee.contactno;

EmployeeService.setEmployee(employee); //employee object passed to EmployeeService

localStorage.setItem('employee', JSON.stringify($scope.employee));//set the values in localstorage

};

$scope.todate_close = function () {

}

//use $watch display edited employee properties to view without page refresh

$scope.$watch(function () {

var Employee = EmployeeService.Employee;

if (Employee !== null) {

$scope.employee = Employee;

}

return $scope.employee;

});

$scope.cancel=function()

{

$("#basicDialog").ejDialog("close");

}

});

I am working with angularjs. Where am I wrong in above code. how can i open the dialog for 'edit profile' which has three tabs for basic, contact and other information.? How can i fix it?

Thank you.

SN Sasikala Nagarajan Syncfusion Team March 19, 2015 01:07 PM UTC

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:

sample

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