I am trying angular-xeditable for the first time and managed to get everything working EXCEPT the page loads with all the table rows in Edit Mode and I need the default behavior. (Clicking the 3 cancel buttons after load shows what I am looking to create).
I have a stripped-down plunker (no CRUD methods) that shows what I mean ... plunker
I also created the same using $scope but I would prefer not to use $scope ... plunker with $scope
here is my view:
<body ng-controller="DistributorsController as dist">
<fieldset>
<legend>Distributors</legend>
<table class="table table-striped table-bordered">
<tbody>
<tr>
<th style="width:22%;">Name</th>
<th style="width:15%;">Phone</th>
<th style="width:12%;">Email</th>
<th style="width:6%;"> </th>
</tr>
<tr ng-repeat="dis in dist.distributors" ng-dblclick="rowform.$show()">
<td>
<span editable-text="dis.name" e-name="name" e-form="rowform" e-style="width:100%;">
{{ dis.name || '--' }}
</span>
</td>
<td>
<span editable-text="dis.phone" e-name="phone" e-form="rowform" e-style="width:100%;">
{{ dis.phone|phone }}
</span>
</td>
<td>
<span editable-text="dis.email" e-name="email" e-form="rowform" e-style="width:100%;">
{{ dis.email || '--' }}
</span>
</td>
<td style="white-space: nowrap">
<!-- form -->
<form editable-form="" name="rowform" onbeforesave="dist.saveRecord($data, dis.id)" ng-show="rowform.$visible" class="form-buttons form-inline" shown="inserted == distributor">
<button type="submit" ng-disabled="rowform.$waiting">
<span class="glyphicon glyphicon-ok-sign" style="color:#006837;"></span>
</button>
<button type="button" ng-disabled="rowform.$waiting" ng-click="rowform.$cancel()">
<span class="glyphicon glyphicon-remove-sign" style="color: #990000;"></span>
</button>
</form>
<div class="buttons" ng-show="!rowform.$visible">
<span class="glyphicon glyphicon-trash" style="color: #990000;" ng-click="dist.removeRecord($index, dis.id)"></span>
</div>
</td>
</tr>
</tbody>
</table>
<p>
<a ng-click="dist.insertRecord()" class="btn btn-xs btn-default">
<span class="glyphicon glyphicon-plus-sign" style="color:#006837;"></span>
Add New</a>
</p>
</fieldset>
</body>
and my controller
(function(){
'use strict';
angular
.module('app')
.controller('DistributorsController', DistributorsController);
DistributorsController.$inject = ['$filter'];
/* #ngInject */
function DistributorsController($filter) {
/* jshint validthis: true */
var vm = this;
vm.distributors = [
{id: 1, name: "Jonah's Whale", phone: '3185551212', email: 'jwhale#distributors.org'},
{id: 2, name: "Paul's Thorn", phone: '5015551212', email: 'pthorne#distributors.org'},
{id: 3, name: "Lot's Wife", phone: '5045551212', email: 'lwife#distributors.org'}
];
}
})();
Doc Says
To show several editable elements together and submit at once you
should wrap them into tag. The
name attribute of form will create variable in scope (normal angular
behavior) and editable-form attribute will add a few methods to that
variable:
You need to have ng-form attribute on each tr as other elements are not supported in table tag
Markup
<tbody>
<tr ng-form editable-form name="editableForm"
ng-repeat="dis in dist.distributors" ng-dblclick="rowform.$show()">
...................
..editable input elements here..
...................
</tr>
</tbody>
Wokring Plunkr
Related
i only bind the drop-down related value, by clicking on edit button within table, its not working within drop-down
Here is my angularjs code
myapp = angular
.module('myapp', ["ui.router", 'ngAnimate', 'angular-loading-bar', 'ui-notification', 'smart-table', 'ui.bootstrap'])
.controller('DemoCtrl', function ($scope, $interval, Notification, cfpLoadingBar, $http) {
GetAll();
function GetAll() {
$http.get("/api/AddCatagories").then(function (response) {
$scope.cate = response.data
}, function () {
alert("Error")
})
}
$scope.subcateedit = function (Id) {
$http.get("/api/AddSubCatagories/" + Id).then(function (response) {
cfpLoadingBar.start();
$scope.SubCata = response.data
cfpLoadingBar.complete();
})
}
})
Html Table Code is here you can view all code..i only bind the drop-down related value, by clicking on edit button within table, its not working within drop-down
<table st-table="sub" st-safe-src="subcate" class="table table-striped">
<thead>
<tr>
<th style="color:black">Id</th>
<th style="color:black" width="100px">SubCatagoryName</th>
<th style="color:black" width="100px">CatagoryName</th>
<th style="color:black">Action</th>
</tr>
<tr>
<th colspan="5">
<label>Search..</label>
<input st-search placeholder="search" class="input-sm form-control" type="search" />
</th>
</tr>
</thead>
<tbody>
<tr st-select-row="row" st-select-mode="multiple" ng-repeat="row in sub">
<td style="color:black">{{row.Id}}</td>
<td style="color:black">{{row.SubCataName}}</td>
<td style="color:black">{{row.tblcatagory.CataName}}</td>
<td>
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default" ng-click="subcateedit(row.Id)">
<i class="glyphicon glyphicon-pencil" style="color:black">
</i>
</button>
<button type="button" class="btn btn-danger" ng-click="subcatedelete(row.Id)">
<i class="glyphicon glyphicon-trash" style="color:white">
</i>
</button>
</div>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5" class="text-center">
<div st-pagination="" st-items-by-page="itemsByPage"></div>
</td>
</tr>
</tfoot>
</table>
html form code:
<section class="panel">
<header class="panel-heading danger">
Add Catagory
</header>
<div class="panel-body" ng-controller="DemoCtrl">
<div ng-form="frm" name="loginForm"
class="pure-form pure-form-aligned" autocomplete="off">
<div class="position-center">
<div class="form-group" ng-class="{ 'has-error' :loginForm.ddl.$invalid && !loginForm.ddl.$pristine }">
<label>SubCatagory Name*</label>
<p>{{ SubCata.tblcatagory.CataName }}</p>
<select required name="ddl"
value="{{ SubCata.tblcatagory.CataName }}"
class="form-control"
ng-model="SubCata"
ng-options="item.CataName for item in cate">
</select>
<p ng-show="loginForm.ddl.$dirty && loginForm.ddl.$error.required"
class="help-block">Catagory Name is required</p>
</div>
<div class="form-group" ng-class="{ 'has-error' :loginForm.name.$invalid && !loginForm.name.$pristine }">
<label>SubCatagory Name*</label>
<input type="text" name="name" class="form-control" ng-model="SubCata.SubCataName"
ng-minlength="3" ng-maxlength="20" required>
<p ng-show="loginForm.name.$dirty && loginForm.name.$error.required"
class="help-block">SubCatagory Name is required</p>
<p ng-show="loginForm.name.$error.minlength" class="help-block">
SubCatagory Name is too short.
</p>
<p ng-show="loginForm.name.$error.maxlength" class="help-block">
SubCatagory Name is too long.
</p>
</div>
<button type="submit" class="btn btn-primary" ng-click="submitSubForm(loginForm.$valid , SubCata)"
ng-disabled="loginForm.$invalid">
Submit
</button>
</div>
</div></div>
</section>
UPDATE
now one issue is that ng-model="SubCata.tblcatagory.CataName" due to this i can't get the this {{SubCata.tblcatagory.Id}} id in the controller $scope
<select required name="ddl" class="form-control"
ng-model="SubCata.tblcatagory.Id"
ng-options="item.Id as item.CataName for item in cate">
</select>
i get id from this code
<label>SubCatagory Name*</label>
<p>{{ SubCata.tblcatagory.CataName }}</p>
<select required name="ddl"
value="{{ SubCata.tblcatagory.CataName }}"
class="form-control"
̶n̶g̶-̶m̶o̶d̶e̶l̶=̶"̶S̶u̶b̶C̶a̶t̶a̶"̶
̶n̶g̶-̶o̶p̶t̶i̶o̶n̶s̶=̶"̶i̶t̶e̶m̶.̶C̶a̶t̶a̶N̶a̶m̶e̶ ̶f̶o̶r̶ ̶i̶t̶e̶m̶ ̶i̶n̶ ̶c̶a̶t̶e̶"̶
ng-model="SubCata.tblcatagory.CataName"
ng-options="item.CataName as item.CataName for item in cate">
</select>
"I've displayed 20 records in navigation tab and against each records I've added coloumn for checkbox. My requirement is if user selects records (row) 1, 4, 8 using checkbox and click on "Edit" button on top of Navigation tab then it should display on Modal screen so that user can edit it.
if he/she selects records 5, 8, 6 then records should be display in that particular order.
I google it but couldn't find any related posts.
Below is my HTML code:
<div ng-app="RecordApp" ng-controller="recordcontroller" class="container-fluid">
<div class="input-group">
<ul class="nav nav-tabs">
<li role="menu" class="active"><a href="#" data-toggle="tab" >User Data</a></li>
</ul>
<table class="table">
<thead>
<tr>
<th>
Select
</th>
<th>
Test1
</th>
<th>
Test2
</th>
<th>
Test3
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="record in Records | orderBy:SortBy:Reverse ">
<td>
<input type="checkbox" checked="checked" ng-model="record.Selected" ng-change="Checked(record)" />
</td>
<td>{{ record.Test1 }}</td>
<td>{{ record.Test2 }}</td>
<td>{{ record.Test3 }}</td>
</tr>
</tbody>
</table>
</div>
following is my AngularJs code for populating the navigation tab
$http.get(pageBaseUrl + "api/records").success(function (records) {
$scope.Records = records;
$scope.IsLoading = false;
});
Below is the code of Button and Modal screen:
<div class="input-group">
<button type="button" data-target="#editRecords" data-toggle="modal" class="btn btn-primary navbar-btn">
<span class="glyphicon glyphicon-floppy-disk"></span>
Edit Multiple Records
</button>
</div>
<div id="editRecords" class="modal" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h2>Edit Data For Selected Records </h2>
</div>
<div class="modal-body">
<table class="table-condensed table-striped">
<thead>
<tr>
<th>Test 1</th>
<th>Test 2</th>
<th>Test 3</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="record in Records | orderBy:SortBy:Reverse">
<td><input type="text" class="form-control input-sm" /></td>
<td><input type="text" class="form-control input-sm" /></td>
<td><input type="text" class="form-control input-sm" /></td>
</tr>
</tbody>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" ng-click="SaveRecords();">Save Records</button>
<button type="button" class="btn btn-default" data-dismiss="modal" ng-click="UnmarkForEdition()">
Cancel
</button>
</div>
</div>
</div>
</div>
Thanks for the code, here is my solution,
JSFiddle Demo
Issues:
First I check if the object contains any selected checkboxes using the code.
$scope.checkCheckbox = function(){
return $filter('filter')($scope.Records, {Selected: true}).length === 0;
}
In the above code, I check the ng-repeat array if there is any object containing the property Selected:true, if there are none, then the length will be zero which using a comparator operator, I return a boolean. This is used by the HTML element button attribute ng-disabled and disables the input.
<button type="button" ng-disabled="checkCheckbox()" data-target="#editRecords" data-toggle="modal" class="btn btn-primary navbar-btn">
<span class="glyphicon glyphicon-floppy-disk"></span>
Edit Multiple Records
</button>
When the edit multiple records, button is clicked, I open the modal, and in the code I have added a simpleng-if` which will show only the inputs where the checkbox is selected!
<tr ng-if="record.Selected" ng-repeat="record in Records | orderBy:SortBy:Reverse">
<td><input type="text" class="form-control input-sm" /></td>
<td><input type="text" class="form-control input-sm" /></td>
<td><input type="text" class="form-control input-sm" /></td>
</tr>
Let me know if this fixes the issue.
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
};
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/
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