angular-xeditable

Posted 2020-06-08

 

http://vitalets.github.io/angular-xeditable/#text-simple

ng-repeat="user in users" e-rows="7" e-cols="40" e-style="color: green" buttons="no" onaftersave <form editable-form name="editableForm" onaftersave="saveUser()"> or e-form="rowform"
<span editable-text="user.name" onbeforesave="checkName($data)"> onbeforesave="checkName($data, user.id)"
{{ user.name || ‘empty‘ }}
</span>
<span editable-select="user.status" e-ng-options="s.value as s.text for s in statuses">
{{ showStatus(user) }}
</span>
-----------------
<a href="#" editable-select="user.group" onshow="loadGroups()" e-ng-options="g.id as g.text for g in groups">
{{ user.groupName || ‘not set‘ }}
</a>
$scope.groups = [];

$scope.loadGroups = function() {
return $scope.groups.length ? null : $http.get(‘/groups‘).success(function(data) {
$scope.groups = data;
});
-----------
$scope.users = [
{id: 1, name: ‘awesome user1‘, status: 2, group: 4, groupName: ‘admin‘},
{id: 2, name: ‘awesome user2‘, status: undefined, group: 3, groupName: ‘vip‘},
{id: 3, name: ‘awesome user3‘, status: 2, group: null}
];
$scope.statuses = [
{value: 1, text: ‘status1‘},
{value: 2, text: ‘status2‘},
{value: 3, text: ‘status3‘},
{value: 4, text: ‘status4‘}
];
$scope.showStatus = function(user) {
var selected = [];
if(user.status) {
selected = $filter(‘filter‘)($scope.statuses, {value: user.status});
}
return selected.length ? selected[0].text : ‘Not set‘;
};

$scope.checkName = function(data) {
if (data !== ‘awesome‘) {
return "Username should be `awesome`";
}
};

<a href="#" editable-checkbox="user.remember" e-title="Remember?">
{{ user.remember && "Remember me!" || "Don‘t remember" }}
</a>

<a href="#" editable-checklist="user.status" e-ng-options="s.value as s.text for s in statuses">
{{ showStatus() }}
</a>
$scope.statuses = [
{value: 1, text: ‘status1‘},
{value: 2, text: ‘status2‘},
{value: 3, text: ‘status3‘}
];

$scope.showStatus = function() {
var selected = [];
angular.forEach($scope.statuses, function(s) {
if ($scope.user.status.indexOf(s.value) >= 0) {
selected.push(s.text);
}
});
return selected.length ? selected.join(‘, ‘) : ‘Not set‘;
};

<a href="#" editable-radiolist="user.status" e-ng-options="s.value as s.text for s in statuses">
{{ showStatus() }}
</a>

$scope.statuses = [
{value: 1, text: ‘status1‘},
{value: 2, text: ‘status2‘}
];

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

 

<a href="#" editable-bsdate="user.dob" e-datepicker-popup="dd-MMMM-yyyy">
{{ (user.dob | date:"dd/MM/yyyy") || ‘empty‘ }}
</a>

app.controller(‘Ctrl‘, function($scope, $filter) {
$scope.user = {
dob: new Date(1984, 4, 15)
};