Angular-xeditable – Edit in place for AngularJS
|
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'
};
});