EDITING FIELDS USING X-EDITABLE IN ANGULARJS

Angular-xeditable is a bundle of AngularJS directives that allows you to create editable elements,which is also known as click-to-edit or edit-in-place.In this blog, I will be showing how to add x-editable in your application
as shown below:

1)We have to install X-editable using "bower install angular-xeditable" and add below links in index.html:

<link href="bower_components/angular-xeditable/dist/css/xeditable.css" 

rel="stylesheet">

<script src="bower_components/angular-xeditable/dist/js/xeditable.js">

</script>

                                          (or)

You can also add cdnjs links for x-editable as shown below:

<link href="https://cdnjs.cloudflare.com/ajax/libs/angular-xeditable/0.7.1/css/xeditable.css "/>

<link href="https://cdnjs.cloudflare.com/ajax/libs/angular-xeditable/0.7.1/css/xeditable.min.css "/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-xeditable/0.7.1/js/xeditable.js "></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-xeditable/0.7.1/js/xeditable.min.js "></script>

2) Add dependency in your App.js as shown below:

var app = angular.module("app", ["xeditable"]);

3) Set Bootstrap theme in app.run as shown below in App.js :

app.run(function(editableOptions) {
  editableOptions.theme = 'bs3'; // bootstrap3 theme. Can be also 'bs2', 'default'
});

4) Below are the screenshots of how the screens look like:

a)  Before editing:

b) If you don't want to edit the text-fields you can click on Save button as shown below:

c)If you want to edit fields click on the pencil icon for editing as shown below:

d) After clicking on edit icon the page will be displayed as shown below:

e) If you don't want to save the changes made in text-fields, click on the cancel icon as shown below:

f) If you want to save the changes made in the text-fields, click on Save as shown below:

5) Html code for x-editable shown below:

 <form  editable-form name="editableForm3" ng-controller="MyController">

 <div style="margin-bottom: 10px" editable-text="user.displayName"

 e-label="Username:"><strong>User Name: </strong>

{{user.displayName|| 'empty'}}</div>

 <div style="margin-bottom: 10px" editable-text="user.FirstName"

 e-label="Firstname:" ><strong>First Name: </strong>

{{user.FirstName|| 'empty'}}</div>

 <div style="margin-bottom: 10px" editable-text="user.LastName" 

e-label="Lastname:"><strong>Last Name: </strong>

{{user.LastName|| 'empty'}}</div>

 <div style="margin-bottom: 10px" ><strong>Gender:</strong>

<p style="margin-top:-20px;margin-left:60px" type="radio" 

editable-radiolist="user.status" 

e-ng-options="s.value as s.text for s in ::statuses track by s.value">

{{showStatus()|| user.status }}</p></div>

 <div style="margin-bottom: 10px" editable-text="user.DOB" 

e-label="DOB:"><strong>DOB:</strong>{{user.DOB|| 'empty'}}</div>

 <div style="margin-bottom: 10px" editable-text="user.Address"  

e-label="Address:" ><strong>Address:</strong>{{user.Address|| 'empty'}}

</div>

 <div style="margin-bottom: 10px" editable-text="user.Phone" 

 id="number" e-pattern="\d{3}-\d{3}-\d{4}" e-title="xxx-xxx-xxxx"

 e-label="Phone Number:"><strong>Phone number:</strong>

{{user.Phone|| 'empty'}}</div>

 <br>

 <button type="submit" class="btn btn-success" 

ng-disabled="editableForm3.$waiting"

 ng-click="editableForm3.$save();updateProfile()">SAVE</button>

 <span class="glyphicon glyphicon-pencil pull-right"  

ng-click="editableForm3.$show()" ng-hide="editableForm3.$visible">

</span>

 <span ng-show="editableForm3.$visible">

 <span class="glyphicon glyphicon-remove pull-right"  

ng-disabled="editableForm3.$waiting" 

ng-click="editableForm3.$cancel()"></span>

 </span>

 </form>

6) Below is the controller code for editing text and radio buttons :

app.controller('MyController', function($scope) {
 $scope.user = {

displayName: 'awesome user',
FirstName:'awesome',
LastName:'user',
status:'2',
DOB:'27-08-2016',
Address:'xyz',
Phone:'123-456-7890'

 };

// for radio list add the following code:

$scope.statuses = [
  {value:1 , text:'Male'},
  {value:2 , text:'Female'}
];

$scope.showStatus = function() {
  var selected = $filter('filter')($scope.statuses, {value: $scope.user.status});
  return ($scope.user.status && selected.length) ? selected[0].text : 'Not set';
};

});

7) Add CSS code for radio buttons:

.editable-radiolist label {
  display: inline-block;
}

Thanks,

Lakshmi Alekhya Vaddi

alekhya4c4@gmail.com

MOURITECH PVT LTD.

www.mouritech.com