I am trying to figure out the correct way to incorporate st-table, st-safe-src, and filtering of the data by a control that lives outside of the table itself. Users can add, edit, and delete data so this is why i am using the safe source.
any examples or feedback would be great!
Checkout this example which contains option to Add, Edit, Delete rows from the Smart-Table.
javascript
angular.module('myApp', ['smart-table'])
.controller('mainCtrl', ['$scope', function($scope) {
$scope.rowCollection = [{
id: 100,
firstName: 'Laurent',
lastName: 'Renard',
birthDate: new Date('1987-05-21'),
balance: 102,
email: '[email protected]'
}, {
id: 101,
firstName: 'Blandine',
lastName: 'Faivre',
birthDate: new Date('1987-04-25'),
balance: -2323.22,
email: '[email protected]'
}, {
id: 102,
firstName: 'Francoise',
lastName: 'Frere',
birthDate: new Date('1955-08-27'),
balance: 42343,
email: '[email protected]'
}];
var id = 1;
$scope.edit = false;
$scope.addRandomItem = function addRandomItem() {
$scope.editrow = {id:++id};
$scope.edit = true;
};
$scope.removeItem = function removeItem(row) {
var index = $scope.rowCollection.indexOf(row);
if (index !== -1) {
$scope.rowCollection.splice(index, 1);
}
}
$scope.editItem = function editItem(row) {
$scope.editrow = angular.copy(row);
$scope.edit = true;
}
$scope.saveItem = function saveItem(editrow) {
var index;
var itemStatus=false;
for (index = 0; index < $scope.rowCollection.length; index++) {
if ($scope.rowCollection[index].id === editrow.id) {
itemStatus=true;
break;
}
}
if (itemStatus) {
console.log("Replacing item:"+editrow.id);
$scope.rowCollection.splice(index, 1, editrow);
$scope.editrow = {id:++id};
}
else {
console.log("Adding item:"+editrow.id);
$scope.rowCollection.push(editrow);
$scope.editrow = {id:++id};
}
$scope.edit = false;
}
}]);
html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<link data-require="[email protected]" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<script data-require="[email protected]" data-semver="1.2.21" src="https://code.angularjs.org/1.2.21/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
<script src="smart-table.debug.js"></script>
<script src="lrInfiniteScrollPlugin.js"></script>
</head>
<body ng-controller="mainCtrl">
<h3>Basic Smart-Table Starter</h3>
<button type="button" ng-click="addRandomItem()" class="btn btn-sm btn-success">
<i class="glyphicon glyphicon-plus">
</i> Add random item
</button>
<table ng-show="edit">
<tbody>
<tr>
<th>first name</th>
<th>last name</th>
<th>birth date</th>
<th>balance</th>
<th>email</th>
<th>action</th>
</tr>
<tr>
<td><input data-ng-model="editrow.firstName" type="text" class="form-control"
placeholder="Enter first name" /></td>
<td><input data-ng-model="editrow.lastName" type="text" class="form-control"
placeholder="Enter last name" /></td>
<td><input data-ng-model="editrow.birthDate" type="text" class="form-control"
placeholder="Enter brith date" /></td>
<td><input data-ng-model="editrow.balance" type="text" class="form-control"
placeholder="Enter balance" /></td>
<td><input data-ng-model="editrow.email" type="text" class="form-control"
placeholder="Enter email" /></td>
<td><button type="button" ng-click="saveItem(editrow)" class="btn btn-sm btn-success">Save</button></td>
</tr>
</tbody>
</table>
<table st-table="rowCollection" class="table table-striped">
<thead>
<tr>
<th>first name</th>
<th>last name</th>
<th>birth date</th>
<th>balance</th>
<th>email</th>
<th>edit</th>
<th>delete</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in rowCollection">
<td>{{row.firstName}}</td>
<td>{{row.lastName}}</td>
<td>{{row.birthDate | date:'shortDate'}}</td>
<td>{{row.balance}}</td>
<td>{{row.email}}</td>
<td>
<button type="button" ng-click="editItem(row)" class="btn btn-sm btn-danger">
<i class="glyphicon glyphicon-remove-circle">
</i>
</button>
<td>
<button type="button" ng-click="removeItem(row)" class="btn btn-sm btn-danger">
<i class="glyphicon glyphicon-remove-circle">
</i>
</button>
</td>
</tr>
</tbody>
</table>
</body>
</html>
© 2022 - 2024 — McMap. All rights reserved.