Angularjs xeditable

Angular-xeditable – Edit in place for AngularJS

Angular xeditable
Angularjs xeditable
Angular-xeditable is a bundle of AngularJS directives that allows you to create editable elements.
Such technique is also known as click-to-edit or edit-in-place. Angularj file upload

Controls & Features

html5 inputs

How to set x-editable select box

Angularjs xeditable is key features select box is confused so i mentioned select box xeditable code follows and database insert data
<span editable-select="active.ClientQueries" e-name="ClientQueries" e-ng-options="s for s in main.states">{{ (states | filter:{value: active.ClientQueries})[0].text || 'Not set' }}</span>
AngularJS X-Editable table row validation

<tr ng-repeat="user in | filter:searchField | orderBy:sortType:sortReverse" ng-if=" > 0">
        <div ng-show="rowform.$visible">
            <form editable-form name="rowform" onaftersave="upd_tel($data,">
                <button type="submit" class="bt-t bt-suc"><i class="fa fa-check"></i></button><button type="button" ng-click="rowform.$cancel()" class="bt-t bt-dan"><i class="fa fa-times"></i></button>
        <div ng-show="!rowform.$visible">
            <a class="bt-t bt-war"><i class="lgicon icon icon-pencil" ng-click="rowform.$show()"></i></a><a class="bt-t bt-dan"><i class="lgicon icon icon-trash" id="{{}}" ng-click="openDialog("></i></a>

        <span editable-text="myTel.ds_contato" e-name="ds_contato" e-form="rowform" onbeforesave="checkData($data)" e-required>

        <span editable-text="myTel.num_tel" e-name="num_tel" e-form="rowform" e-mask="(99) 9?9999-9999" e-required onbeforesave="checkTel($data)">

$scope.checkData = function(data) {
    if (data == null) {
        return "Required field";

$scope.checkTel = function(data) {
    if (data == null) {
        return "Required field";
    } else if ($scope.rowform.user.$invalid) {
        return "Invalid field";
Example xeditable Code:

First include Angularjs in your project
<script src=""></script>
Second Include Bootstrap css
<link href="//" rel="stylesheet">
Third Install angular-xeditable bower
bower install angular -xeditable
Include angular xeditable into your project
<link href="bower_components/angular-xeditable/dist/css/xeditable.css" rel="stylesheet">
<script src="bower_components/angular-xeditable/dist/js/xeditable.js"></script>
Define angular app and add xeditable to depandencies
<html ng-app="myapp">
var app = angular.module("myapp",["xeditable"]);
Set theme in {
  editableOptions.theme = 'bs3'; });
<div ng-controller="Ctrl">
  <a href="#" editable-text="">{{ || "empty" }}</a>
app.controller('Ctrl', function($scope) {
  $scope.user = {
    name: 'Dev2tricks'
Angularjs xeditable Developerinvention 5 of 5
Angular-xeditable – Edit in place for AngularJS Angularjs xeditable Angular-xeditable is a bundle of AngularJS directives that allows...

Share this

Related Posts

Next Post »

Xolo Offer