Access all forms in Angular xeditable - angularjs

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>

Related

Angular-xeditable disable rendering the particular element to editable mode

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>

How can I detect the name of a file angular js

I am using this module for angular:
https://github.com/nervgh/angular-file-upload
This is my code which works:
<tr ng-repeat="item in uploader.queue">
<td>
<strong ng-model="test">{{ item.file.name }}</strong>
<!-- Image preview -->
<!--auto height-->
<!--<div ng-thumb="{ file: item.file, width: 100 }"></div>-->
<!--auto width-->
<div ng-show="uploader.isHTML5" ng-thumb="{ file: item._file, height: 200 }"></div>
<!--fixed width and height -->
<!--<div ng-thumb="{ file: item.file, width: 100, height: 100 }"></div>-->
</td>
<td ng-show="uploader.isHTML5" nowrap>{{ item.file.size/1024/1024|number:2 }} MB</td>
<td ng-show="uploader.isHTML5">
<div class="progress" style="margin-bottom: 0;">
<div class="progress-bar" role="progressbar" ng-style="{ 'width': item.progress + '%' }"></div>
</div>
</td>
<td class="text-center">
<span ng-show="item.isSuccess"><i class="glyphicon glyphicon-ok"></i></span>
<span ng-show="item.isCancel"><i class="glyphicon glyphicon-ban-circle"></i></span>
<span ng-show="item.isError"><i class="glyphicon glyphicon-remove"></i></span>
</td>
<td nowrap>
<button type="button" class="btn btn-success btn-xs" ng-click="item.upload()" ng-disabled="item.isReady || item.isUploading || item.isSuccess">
<span class="glyphicon glyphicon-upload"></span> Upload
</button>
</td>
</tr>
How can I extract the name of the file without the extension?
What about substring? Something like:
var filename = fullPath.replace(/^.*[\\\/]/, '')
And to get extension:
var ext = item._file.substr(item._file.lastIndexOf('.') + 1);

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>

Button doesn't change visibility

in my Form i have Buttons who only be shown then edit is true. Now i set edit from another Button and get a problem.
The View get editable, thats great. But the Buttons donĀ“t showing. Whats wrong?
This is a bit of the code from my view.
<div ng-controller="MenuController" ng-init="edit=false" style="background:whitesmoke; border:1px solid lightgray; border-radius:5px; margin-top:0px; margin-bottom:5px; height:405px;">
<button prevent-default ng-click="" class="btn btn-deufol btn-sm pull-right" style="width:150px;margin:2px;"><span class="glyphicon glyphicon-print"></span> Lieferschein drucken</button>
<button prevent-default ng-click="" class="btn btn-deufol btn-sm pull-right" style="width:150px;margin:2px;"><span class="glyphicon glyphicon-print"></span> Auftrag drucken</button>
<button prevent-default ng-click="edit=true" ng-show="!edit" name="BtnWork" id="BtnWork" class="btn btn-deufol btn-sm pull-right" style="width:150px;margin:2px;"><span class="glyphicon glyphicon-pencil"></span> Bearbeiten</button>
<button prevent-default ng-click="resetData()" ng-show="edit" ng-model="BtnReset" id="BtnReset" e-form="textBtnForm" class="btn btn-danger btn-sm pull-right" style="width:150px;margin:2px;"><span class="glyphicon glyphicon-remove-circle"></span> Abbruch</button>
<button prevent-default ng-click="saveData()" ng-show="edit" id="BtnUpdate" class="btn btn-success btn-sm pull-right" style="width:150px;margin:2px;"><span class="glyphicon glyphicon-ok-circle"></span> Speichern</button>
<ul class="nav nav-tabs">
<li class="active">
<a data-target="#tab-one" data-toggle="tab"><i class="glyphicon glyphicon-list-alt"></i> Auftrag</a>
</li>
<li>
<a data-target="#tab-two" data-toggle="tab"><i class="glyphicon glyphicon-book"></i> Dokumente</a>
</li>
</ul>
<div class="tab-content css-form">
<div id="tab-one" class="tab-pane active">
<form name="InputForm" novalidate role="form" class="simple-form">
<div ng-view class="table-responsive table-singleview" style="position:relative;background:whitesmoke;margin-top:0px;margin-bottom:0px;">
<table border="0" style="width:100%; height:100%;">
<tbody ng-controller="ContractsSingleViewController">
<tr>
<td style="width:8%;" align="left">Standort</td>
<td style="width:25.3333%">
<div ng-controller="LocationsListController">
<span class="nullable">
<%--required--%>
<select placeholder="Standort" data-ng-model="myLocations" ng-disabled="!edit" ng-options="Plants._locationName for Plants in myLocationsList" style="width:281px;height:23px;background:whitesmoke;" class="ng-valid ng-dirty">
<option value="">{{myViewData.locationName}}</option>
</select>
</span>
<%--<span class="label label-danger" data-ng-show="myViewData.locationName.$error.required">Required!</span>--%>
</div>
</td>
.............
</table>
</tbody>
</div>
</form>
</div>
<%--Table one--%>
In my angular code i set edit = true like this (snippet):
$scope.edit = false;
Why this works for my table, but no for my buttons?

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