由网友(安然ら若梦)分享简介：我想弄清楚由生活在表本身之外的控制纳入ST-表，ST-安全-SRC和过滤数据的正确方法。用户可以添加，编辑和删除数据，所以这就是为什么我使用的安全来源。任何实例或反馈将是巨大的！解决方案 结帐这个例子中，其中包含选项添加，编辑，删除行从智能表。 http://plnkr.co/edit/DtD4xC \r\r...
我想弄清楚由生活在表本身之外的控制纳入ST-表，ST-安全-SRC和过滤数据的正确方法。用户可以添加，编辑和删除数据，所以这就是为什么我使用的安全来源。
任何实例或反馈将是巨大的！
解决方案结帐这个例子中，其中包含选项添加，编辑，删除行从智能表。
http://plnkr.co/edit/DtD4xC
rr
angular.module（'对myApp'，['智能表']）r .controller（'mainCtrl'，['$范围'，r 功能（$范围）{r $ scope.rowCollection = [{r ID：100，r 姓：洛朗，r 名字：雷纳，r 生日：新的日期（1987年5月21日），r 平衡：102，r 电子邮件：whatever@gmail.comr }，{r ID：101，r 姓：Blandine'，r 名字：Faivre，r 生日：新的日期（1987年4月25日），r 平衡：-2323.22，r 电子邮件：oufblandou@gmail.comr }，{r ID：102，r 姓：弗朗索瓦丝'，r 名字：'弗里尔'，r 生日：新的日期（1955年8月27日），r 余额：42343，r 电子邮件：raymondef@gmail.comr }];r 变种的id = 1;r $ scope.edit = FALSE;r $ scope.addRandomItem =功能addRandomItem（）{r $ scope.editrow = {ID：++ ID};r $ scope.edit = TRUE;r };rr $ scope.removeItem =功能的removeItem（行）{r VAR指数= $ scope.rowCollection.indexOf（行）;r 如果（指数！== -1）{r $ scope.rowCollection.splice（指数，1）;r }r }rr $ scope.editItem =功能editItem（行）{r $ scope.editrow = angular.copy（行）;r $ scope.edit = TRUE;r }rr $ scope.saveItem =功能saveItem（editrow）{r VAR指标;r VAR itemStatus = FALSE;rr 对于（指数= 0;指数 - LT; $ scope.rowCollection.length;指数++）{r 如果（$ scope.rowCollection [指数] .ID === editrow.id）{r itemStatus =真;r 打破;r }r }r 如果（itemStatus）{r 的console.log（更换项目：+ editrow.id）;r $ scope.rowCollection.splice（指数，1，editrow）;r $ scope.editrow = {ID：++ ID};r }r 其他{r 的console.log（添加项目+ editrow.id）;r $ scope.rowCollection.push（editrow）;r $ scope.editrow = {ID：++ ID};r }r $ scope.edit = FALSE;r }rr }r ]）; rrr
rr
＆LT;！DOCTYPE HTML＆GT;r＆LT; HTML NG-应用=对myApp＆GT;rr ＆LT; HEAD＆GT;r ＆LT;链路数据需要=bootstrap-css@3.2.0数据semver =3.2.0的rel =stylesheet属性HREF =// maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap .min.css/＆GT;r ＆所述;脚本数据需要=angular.js@1.2.21数据semver =1.2.21SRC =的https：//$c$c.angularjs.org/1.2.21/angular.js＆GT ;＆LT; / SCRIPT＆GT;r ＆LT;链接rel =stylesheet属性HREF =style.css文件/＆GT;r ＆所述; SCRIPT SRC =的script.js＆GT;＆下; /脚本＆GT;r ＆LT;脚本SRC =智能table.debug.js＆GT;＆LT; / SCRIPT＆GT;r ＆所述; SCRIPT SRC =lrInfiniteScrollPlugin.js＆GT;＆下; /脚本＆GT;r ＆LT; /头＆GT;rr ＆LT;机身NG控制器=mainCtrl＆GT;r ＆LT; H3＆GT;基本智能表入门＆LT; / H3 GT＆;r ＆LT;按钮式=按钮NG点击=addRandomItem（）级=BTN BTN-SM BTN-成功＆GT;r＆LT; I类=glyphicon glyphicon加＆GT;r＆LT; I＆GT /;添加随机项r＆LT; /按钮＆GT;r＆LT;表NG-秀=编辑＆GT;r＆LT;＆TBODY GT;r＆所述; TR＆GT;r百分位＆gt;首先名和LT; /第ir＆LT;第i个姓氏＆LT; /第ir＆LT;第i个出生日期和LT; /第ir＆LT;第i余量＆lt; /第ir＆LT;第i个电子邮件＆LT; /第ir＆LT;第i个动作＆LT; /第ir ＆LT; / TR＆GT;r ＆所述; TR＆GT;r＆LT; TD＆GT;＆LT;输入数据-NG-模式=editrow.firstName类型=文本级=表格控r占位=请输入名字/＆GT;＆LT; / TD＆GT;r＆LT; TD＆GT;＆LT;输入数据-NG-模式=editrow.lastName类型=文本级=表格控r占位=输入姓氏/＆GT;＆LT; / TD＆GT;r＆LT; TD＆GT;＆LT;输入数据-NG-模式=editrow.birthDate类型=文本级=表格控r占位=输入84。新生日期/＆GT;＆LT; / TD＆GT;r＆LT; TD＆GT;＆LT;输入数据-NG-模式=editrow.balance类型=文本级=表格控r占位=输入平衡/＆GT;＆LT; / TD＆GT;r＆LT; TD＆GT;＆LT;输入数据-NG-模式=editrow.email类型=文本级=表格控r占位=输入电子邮件/＆GT;＆LT; / TD＆GT;r＆LT; TD＆GT;＆LT;按钮式=按钮NG点击=saveItem（editrow）级=BTN BTN-SM BTN-成功＆GT;保存＆LT; /按钮＆GT;＆LT; / TD＆GT;r ＆LT; / TR＆GT;r＆LT; / TBODY＆GT;r＆LT; /表＆gt;r ＆LT;表ST表=rowCollection级=表的表条纹＆GT;r＆LT;＆THEAD GT;r＆所述; TR＆GT;r百分位＆gt;首先名和LT; /第ir＆LT;第i个姓氏＆LT; /第ir＆LT;第i个出生日期和LT; /第ir＆LT;第i余量＆lt; /第ir＆LT;第i个电子邮件＆LT; /第ir百分位＆gt;编辑＆LT; /第ir＆LT;第i删除＆LT; /第ir ＆LT; / TR＆GT;r ＆LT; / THEAD＆GT;r ＆LT;＆TBODY GT;r ＆LT; TR NG重复=行rowCollection＆GT;r ＆所述; TD＆GT; {{row.firstName}}＆下; / TD＆GT;r ＆所述; TD＆GT; {{row.lastName}}＆下; / TD＆GT;r ＆所述; TD＆GT; {{row.birthDate |日期：'shortDate'}}＆LT; / TD＆GT;r ＆所述; TD＆GT; {{row.balance}}＆下; / TD＆GT;r ＆所述; TD＆GT; {{row.email}}＆下; / TD＆GT;r ＆所述; TD＆GT;r＆LT;按钮式=按钮NG点击=editItem（行）级=BTN BTN-SM BTN-危险＆GT;r ＆LT; I类=glyphicon glyphicon-删除圈＆GT;r ＆LT; I＆GT /;r＆LT; /按钮＆GT;r ＆所述; TD＆GT;r＆LT;按钮式=按钮NG点击=为removeItem（行）级=BTN BTN-SM BTN-危险＆GT;r＆LT; I类=glyphicon glyphicon-删除圈＆GT;r＆LT; I＆GT /;r＆LT; /按钮＆GT;r＆LT; / TD＆GT;r ＆LT; / TR＆GT;r＆LT; / TBODY＆GT;r ＆LT; /表＆gt;r ＆LT; /身体GT;rr＆LT; / HTML＆GT; rrr
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.
http://plnkr.co/edit/DtD4xC
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: 'whatever@gmail.com'
}, {
id: 101,
firstName: 'Blandine',
lastName: 'Faivre',
birthDate: new Date('1987-04-25'),
balance: -2323.22,
email: 'oufblandou@gmail.com'
}, {
id: 102,
firstName: 'Francoise',
lastName: 'Frere',
birthDate: new Date('1955-08-27'),
balance: 42343,
email: 'raymondef@gmail.com'
}];
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;
}
}
]);
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<link data-require="bootstrap-css@3.2.0" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<script data-require="angular.js@1.2.21" 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>
相关推荐
最新文章