Angular-xeditable disable rendering the particular element to editable mode - angularjs

Below is the sample Code availabe in the link I am trying to achieve my use case.
In this table, I will have one more column as first column which is an checkbox. On selecting the "Edit" button, only the selected checkbox rows from the table should show editable mode and other rows should display as static text. Is it possible to achieve it. Can anyone help me in this to meet my requirement.
<h4>Angular-xeditable Editable row (Bootstrap 3)</h4>
<div ng-app="app" ng-controller="Ctrl">
<table class="table table-bordered table-hover table-condensed">
<tr style="font-weight: bold">
<td style="width:35%">Name</td>
<td style="width:20%">Status</td>
<td style="width:20%">Group</td>
<td style="width:25%">Edit</td>
</tr>
<tr ng-repeat="user in users">
<td>
<!-- editable username (text with validation) -->
<span editable-text="user.name" e-name="name" e-form="rowform" e-ng-hide="true" onbeforesave="checkName($data, user.id)" e-required>
<span ng-hide="false">hello</span>
{{ user.name || 'empty' }}
</span>
</td>
<td>
<!-- editable status (select-local) -->
<span editable-select="user.status" e-name="status" e-form="rowform" e-ng-options="s.value as s.text for s in statuses">
{{ showStatus(user) }}
</span>
</td>
<td>
<!-- editable group (select-remote) -->
<span editable-select="user.group" e-name="group" onshow="loadGroups()" e-form="rowform" e-ng-options="g.id as g.text for g in groups">
{{ showGroup(user) }}
</span>
</td>
<td style="white-space: nowrap">
<!-- form -->
<form editable-form name="rowform" onbeforesave="saveUser($data, user.id)" ng-show="rowform.$visible" class="form-buttons form-inline" shown="inserted == user">
<button type="submit" ng-disabled="rowform.$waiting" class="btn btn-primary">
save
</button>
<button type="button" ng-disabled="rowform.$waiting" ng-click="rowform.$cancel()" class="btn btn-default">
cancel
</button>
</form>
<div class="buttons" ng-show="!rowform.$visible">
<button class="btn btn-primary" ng-click="rowform.$show()">edit</button>
<button class="btn btn-danger" ng-click="removeUser($index)">del</button>
</div>
</td>
</tr>
</table>
<button class="btn btn-default" ng-click="addUser()">Add row</button>
</div>

Related

Access all forms in Angular xeditable

Im having a hard time figuring out how to access multiple forms in xeditable table forms. my form name is "rowform" and i want to access inputs from all forms in controller. i tried to access using $scope.rowform but it is returning "undefined". here is the my form. Thanks in advance
<tr ng-repeat="item in inv_row">
<td>
<!-- editable username (text with validation) -->
<span editable-select="item.inventory" e-name="inventory" e-form="rowform" buttons="no" e-placeholder="Select Inventory" e-ng-options="v.inventory_id as v.inventory_id for (k,v) in inventory_options track by k" e-ng-change="row_calc($data)">
#{{ show_inventory(item) }}
</span>
</td>
<td>
<!-- editable status (select-local) -->
<span editable-select="item.invoice_type" e-name="invoice_type" e-form="rowform" buttons="no" e-placeholder="Select Rent Type" e-name="status" e-ng-options="v as v for (k,v) in inv_type_options track by k">
#{{ show_invoice_type(item) }}
</span>
</td>
<td>
<span editable-textarea="item.desc" e-rows="1" e-name="desc" e-form="rowform" buttons="no" >
#{{ item.desc || 'no description' }}
</span>
</td>
<td>
<!-- editable username (text with validation) -->
<span editable-text="item.strt" e-name="strt" buttons="no" e-form="rowform" >
#{{ item.strt || 'empty' }}
</span>
</td>
<td>
<!-- editable username (text with validation) -->
<span editable-text="item.enddt" e-name="enddt" buttons="no" e-form="rowform">
#{{ item.enddt || 'empty' }}
</span>
</td>
<td>
<!-- editable username (text with validation) -->
<span editable-text="item.nodys" e-name="nodys" e-form="rowform" buttons="no">
#{{ item.nodys || 'empty' }}
</span>
</td>
<td>
<!-- editable username (text with validation) -->
<span editable-text="item.rate" e-name="rate" e-form="rowform" buttons="no">
#{{ item.rate || 'empty' }}
</span>
</td>
<td>
<!-- editable username (text with validation) -->
<span editable-text="item.disnt" e-name="disnt" e-form="rowform" buttons="no">
#{{ item.disnt || 'empty' }}
</span>
</td>
<td>
<!-- editable username (text with validation) -->
<span editable-text="item.netamt" e-name="netamt" e-form="rowform" buttons="no">
#{{ item.netamt || 'empty' }}
</span>
</td>
<td style="white-space: nowrap">
<!-- form -->
<form editable-form name="rowform" onaftersave="saveUser($data, item.id)" ng-show="rowform.$visible" class="form-buttons form-inline" shown="inserted == item" >
<button type="submit" ng-disabled="rowform.$waiting" class="btn btn-primary">
save
</button>
<button type="button" ng-disabled="rowform.$waiting" ng-click="rowform.$cancel()" class="btn btn-default">
cancel
</button>
</form>
<div class="buttons" ng-show="!rowform.$visible">
<!-- <button class="btn btn-primary" ng-click="rowform.$show()"><i style="font-size: 17px;font-weight: 300;" class="fa fa-pencil-square-o" aria-hidden="true"></i></button> -->
<button type="button" class="btn btn-primary" ng-click="rowform.$show()">edit</button>
<button class="btn btn-danger" ng-click="removeUser($index)"><i style="font-size: 17px;font-weight: 300;" class="fa fa-trash" aria-hidden="true"></i></button>
</div>

Refresh data only on the filtered condition

I have 3 button group, refresh button and table.
ALL | Dover | Orlando
On page load, All the data is displayed in table by calling api.
Using angularjs filter i have filtered data based on city i.e Dover or Orlando.
Current scenario:
When user is on Dover and clicks refresh button all the data is loaded again i.e ALL and Refresh are have same api call.
Required scenario:
When user is on Dover and clicks refresh button only Dover data should get refresh.
code:
<div class="myrow">
<div class="col-md-6 col-sm-6">
<label for="documentStatus">Queues: </label>
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-primary active" ng-click="updateData(); myFilter = null">ALL</button>
<button type="button" class="btn btn-primary" ng-click="myFilter = {city : 'Dover'}">Dover</button>
<button type="button" class="btn btn-primary" ng-click="myFilter = {city : 'Orlando'}">Orlando</button>
</div>
</div>
</div>
<div class="container" ng-init="updateData()">
<div class="pull-right">
<button type="button" class="btn btn-primary btn-md" value="Refresh" ng-click="myFilter = null; updateData()">
<span class="glyphicon glyphicon-refresh"></span> Refresh
</button>
</div>
<table class="table table-bordered">
<thead>
<tr>
<th></th>
<th>Queue</th>
<th>No of Documents</th>
<th>Oldest document Datetime</th>
<th>Allocated Users</th>
</tr>
</thead>
<tbody ng-repeat="queue in Queues | filter: myFilter">
<tr>
<td>
<label class="checkbox-table">
<input type="checkbox" name="checkbox" ng-model="queue.isChecked" id="check-box-{{$index}}">
</label>
</td>
<td class="col-md-3">{{ queue.queue }}</td>
<td class="col-md-2">{{ queue.noOfDocuments }}</td>
<td class="col-md-2">{{ queue.oldestDoc}}</td>
<td class="col-md-5">{{ queue.allocatedUsers}}</td>
</tr>
</tbody>
</table>
</div>
You can try use angular.copy(arr):
var data = {
original: myOriginalData,
filteredData: angular.copy(myOriginalData) //this is unbind link on the arrayy
};

Datatables + angular.js + xeditable is not working

I am using angular with Datatables and I am trying to edit a row with Xeditable, my issue is that there are no xeditables elements, the span is not turning into editable span.
Here is my code:
<div class="dataTables_wrapper">
<table datatable="ng" class="table table-bordered table-hover dataTable" role="grid">
<thead>
<tr>
<th>{{texts.fullName}}</th>
<th>{{texts.title}}</th>
<th>{{texts.email}}</th>
<th>edit</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="contact in contacts track by $index">
<td>
{{contact.fullName}}
</td>
<td>
{{contact.title}}
</td>
<td>
<span editable-text="contact.email" e-name="email" e-form="rowform">
{{ contact.email || 'empty' }}
</span>
</td>
<td>
<!-- form -->
<form editable-form name="rowform" onbeforesave="saveUser($data, user.id)" ng-show="rowform.$visible" class="form-buttons form-inline">
<button type="submit" ng-disabled="rowform.$waiting" class="btn btn-primary">
save
</button>
<button type="button" ng-disabled="rowform.$waiting" ng-click="rowform.$cancel()" class="btn btn-default">
cancel
</button>
</form>
<div class="buttons" ng-show="!rowform.$visible">
<button class="btn btn-primary" ng-click="rowform.$show()">edit</button>
<button class="btn btn-danger" ng-click="removeUser($index)">del</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
I can see that the xeditable code can't find the $editables elements, I thought it is related to datatable because if I'm trying to use regular table it works well.
Any idea on how to fix it?
Best,
Omri
Your editable-text isn't in the editable-form, this might be the problem.
I think the following code would fix it.
<form editable-form name="rowform" onbeforesave="saveUser($data, user.id)" ng-show="rowform.$visible" class="form-buttons form-inline">
<span editable-text="contact.email" e-name="email" e-form="rowform">
{{ contact.email || 'empty' }
</span>
<button type="submit" ng-disabled="rowform.$waiting" class="btn btn-primary">
save
</button>
<button type="button" ng-disabled="rowform.$waiting" ng-click="rowform.$cancel()" class="btn btn-default">
cancel
</button>
</form>

Smart-table - Setting page from code

I'm using the very good table library Smart-table to display my data.
I am using a custom pagination template. I would however like to be able to set page 1 from the code. I have read up on the st-pipe directive it exposes, but it seems that I would need to re-write the whole filtering/pagination/sorting code myself if I implement that.
I'm after a simple way to programatically set a page from outside of the st-pagination directive that exists in my table's tfoot
<table st-table="displayedCollection" st-safe-src="tags" class="table table-hover">
<tbody>
<tr st-select-row="tag" st-select-mode="single" ng-repeat="tag in displayedCollection" ng-click="click(tag)">
<td>
<span editable-text="tag.name" e-placeholder="enter a display name..." e-name="name" e-form="editableForm" e-required>
{{tag.name}}</span>
</td>
<td>
<span editable-text="tag.path" e-placeholder="enter actual value to be used..." e-name="path" e-form="editableForm" e-required>
{{tag.path}}</span>
</td>
<td>
<form editable-form shown="newItem == tag" onshow="onShow()" name="editableForm" oncancel="oncancel(newItem)" onaftersave="saveForm(tag)">
<!-- EDIT -->
<button type="button" class="btn btn-sm btn-default" ng-click="editableForm.$show()" tooltip="Edit" tooltip-placement="left" ng-hide="editableForm.$visible">
<i class="fa fa-pencil-square-o fa-lg"></i>
</button>
</form>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="1" class="text-left">
<div st-template="app/partials/pagination.html" st-pagination="" st-items-by-page="pager.itemsOnPage"></div>
</td>
<td colspan="1">
<div class="btn-group btn-group-sm pull-right ng-scope">
<button type="button" ng-class="{'active':pager.itemsOnPage==5}" ng-click="pager.itemsOnPage=5" class="btn btn-default">5</button>
<button type="button" ng-class="{'active':pager.itemsOnPage==10}" ng-click="pager.itemsOnPage=10" class="btn btn-default">10</button>
<button type="button" ng-class="{'active':pager.itemsOnPage==20}" ng-click="pager.itemsOnPage=20" class="btn btn-default">20</button>
<button type="button" ng-class="{'active':pager.itemsOnPage==30}" ng-click="pager.itemsOnPage=30" class="btn btn-default">30</button>
</div>
</td>
</tr>
</tfoot>
</table>
I'd like to be able to set page on from the <form> sections onshow directive.
Does anyone know if this is possible? Many thanks.
To set the angular-smart-table page number from code use st-pagination's selectPage() function.
Where your HTML has a paginator element like this:
<div id="pagerId" st-pagination="" st-items-by- ...
You could use code like this in your directive
function setPage(pageNumber)
{
angular
.element( $('#pagerId') )
.isolateScope()
.selectPage(pageNumber);
}
You need to have jQuery installed to use $. I got the idea from the last example on: http://lorenzofox3.github.io/smart-table-website/

put validation on Editable row Form using Angualrjs

I am new in Anguarljs and working on Editable row form.In this form, when i am going to add row button then it's showing new row .but when i am going to add save button without entered data it's showing "empty",Not set" text in form.i wanted that some alert message should come if text box is empty or dropdown is not selected. please tell where should i change my code.how to perform validation in this form
below code
<div ng-controller="EditableRowCtrl">
<table class="table table-bordered table-hover table-condensed">
<tr style="font-weight: bold">
<td style="width:35%">Name</td>
<td style="width:20%">Status</td>
<td style="width:20%">Group</td>
<td style="width:25%">Edit</td>
</tr>
<tr ng-repeat="user in users">
<td>
<!-- editable username (text with validation) -->
<span editable-text="user.name" e-name="name" e-form="rowform" onbeforesave="checkName($data, user.id)" e-required>
{{ user.name || 'empty' }}
</span>
</td>
<td>
<!-- editable status (select-local) -->
<span editable-select="user.status" e-name="status" e-form="rowform" e-ng-options="s.value as s.text for s in statuses">
{{ showStatus(user) }}
</span>
</td>
<td>
<!-- editable group (select-remote) -->
<span editable-select="user.group" e-name="group" onshow="loadGroups()" e-form="rowform" e-ng-options="g.id as g.text for g in groups">
{{ showGroup(user) }}
</span>
</td>
<td style="white-space: nowrap">
<!-- form -->
<form editable-form name="rowform" onbeforesave="saveUser($data, user.id)" ng-show="rowform.$visible" class="form-buttons form-inline" shown="inserted == user">
<button type="submit" ng-disabled="rowform.$waiting" class="btn btn-primary">
save
</button>
<button type="button" ng-disabled="rowform.$waiting" ng-click="rowform.$cancel()" class="btn btn-default">
cancel
</button>
</form>
<div class="buttons" ng-show="!rowform.$visible">
<button class="btn btn-primary" ng-click="rowform.$show()">edit</button>
<button class="btn btn-danger" ng-click="removeUser($index)">del</button>
</div>
</td>
</tr>
</table>
<button class="btn btn-default" ng-click="addUser()">Add row</button>
</div>
An angular form can be validated using attributes like ng-minlength="3" or ng-required inside the input fields.
Then you can check if the field is valid with myForm.myInput.$valid
There is an example on how are forms validated with angularjs
<script>
angular.module('inputExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.user = {name: 'guest', last: 'visitor'};
}]);
</script>
<div ng-controller="ExampleController">
<form name="myForm">
User name: <input type="text" name="userName" ng-model="user.name" required>
<span class="error" ng-show="myForm.userName.$error.required">
Required!</span><br>
Last name: <input type="text" name="lastName" ng-model="user.last"
ng-minlength="3" ng-maxlength="10">
<span class="error" ng-show="myForm.lastName.$error.minlength">
Too short!</span>
<span class="error" ng-show="myForm.lastName.$error.maxlength">
Too long!</span><br>
</form>
<hr>
<tt>user = {{user}}</tt><br/>
<tt>myForm.userName.$valid = {{myForm.userName.$valid}}</tt><br>
<tt>myForm.userName.$error = {{myForm.userName.$error}}</tt><br>
<tt>myForm.lastName.$valid = {{myForm.lastName.$valid}}</tt><br>
<tt>myForm.lastName.$error = {{myForm.lastName.$error}}</tt><br>
<tt>myForm.$valid = {{myForm.$valid}}</tt><br>
<tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br>
<tt>myForm.$error.minlength = {{!!myForm.$error.minlength}}</tt><br>
<tt>myForm.$error.maxlength = {{!!myForm.$error.maxlength}}</tt><br>
</div>
Just read the documentation about forms https://docs.angularjs.org/guide/forms
And about inputs https://docs.angularjs.org/api/ng/directive/input

Resources