Angular-xeditable – Edit in place for AngularJS
 |
| Angularjs xeditable |
Such technique is also known as click-to-edit or edit-in-place. Angularj file upload
Controls & Features
texttextarea
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 bowerbower 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.jsapp.controller('Ctrl', function($scope) {
$scope.user = {
name: 'Dev2tricks'
};
});