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

text
textarea
select
checkbox
radio
date
time
html5 inputs
typeahead

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 pagedTel.data | filter:searchField | orderBy:sortType:sortReverse" ng-if="pagedTel.data.length > 0">
    <td>
        <div ng-show="rowform.$visible">
            <form editable-form name="rowform" onaftersave="upd_tel($data, user.id)">
                <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>
            </form>
        </div>
        <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="{{user.id}}" ng-click="openDialog(user.id)"></i></a>
        </div>
    </td>

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

    <td>
        <span editable-text="myTel.num_tel" e-name="num_tel" e-form="rowform" e-mask="(99) 9?9999-9999" e-required onbeforesave="checkTel($data)">
            {{user.num_tel}}
        </span>
    </td>
</tr>
Controller


$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="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
Second Include Bootstrap css
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" 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 app.run:
app.run(function(editableOptions) {
  editableOptions.theme = 'bs3'; });
view.html
<div ng-controller="Ctrl">
  <a href="#" editable-text="user.name">{{ user.name || "empty" }}</a>
</div>
Controller.js
app.controller('Ctrl', function($scope) {
  $scope.user = {
    name: 'Dev2tricks'
  };  
});
Angularjs xeditable Dev2Tricks 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

Previous
Next Post »