绑定智能表值并编辑行
binding smart table values and editing the rows
使用角度智能表格开发页面。
需要在表中添加新行,目前新行正在末尾添加。如何在表的开头添加行?
这是网页
<style>
.sortable {
cursor: pointer;
}
.sortable:after {
content: url(data:image/gif;base64,R0lGODlhCwALAJEAAAAAAP///xUVFf///yH5BAEAAAMALAAAAAALAAsAAAIUnC2nKLnT4or00PvyrQwrPzUZshQAOw==);
padding-left: 1em;
}
.st-sort-ascent:after {
content: ''25B2';
}
.st-sort-descent:after {
content: ''25BC';
}
</style>
<div ng-controller="AppSettingsController as appCtrl">
<button type="button" ng-click="addRandomItem(row)" class="btn btn-sm btn-success">
<i class="glyphicon glyphicon-plus">
</i> Add random item
</button>
<table st-table="displayedCollection" st-safe-src="rowCollection" class="table table-striped">
<thead>
<tr>
<th class="sortable" st-sort="parameterkey">Parameter Key</th>
<th class="sortable" st-sort="description">Description</th>
<th class="sortable" st-sort="value">Value</th>
<th class="sortable" st-sort="type">Type</th>
<th class="sortable" st-sort="active">Active</th>
<th class="sortable" st-sort="action">Action</th>
</tr>
<tr>
<th colspan="6"><input st-search="" class="form-control" placeholder="global search ..." type="text"/></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in displayedCollection">
<td editable-text="row.key" ng-model="appCtrl.param.key">{{row.key}}</td>
<td>{{row.description}}</td>
<td>{{row.value}}</td>
<td>{{row.type}}</td>
<td>{{row.activeYn}}</td>
<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>
<div style="padding-bottom: 10px; padding-left: 5px; padding-right: 5px;">
<button class="btn btn-primary" type="submit"
style="float: right; margin-right: 5px;" ng-click="appCtrl.save()">Submit</button>
</div>
</div>
这是 js 页面
(function () {
'use strict';
angular.module('app.controllers')
.controller("AppSettingsController", AppSettingsController);
AppSettingsController.$inject = ['$scope','$http','LookupService','$filter'];
function AppSettingsController($scope,$http,LookupService,$filter){
var vm = this;
vm.param={};
$http({
method: 'GET',
url: 'param/getAllAppParam',
}).then(function(resp){
if(resp.data.result != null && resp.data.result != undefined && resp.data.code == 0 && resp.data.result!=false){
$scope.rowCollection = [];
$scope.rowCollection = resp.data.result;
$scope.displayedCollection = [].concat(vm.rowCollection);
}
else{
vm.successMsg = "";
vm.errorMsg = "Error occured in Server..!User Could not be saved..!";
console.log(vm.errorMsg);
vm.saved = false;
}
});
//copy the references (you could clone ie angular.copy but then have to go through a dirty checking for the matches)
// $scope.displayedCollection = [].concat($scope.rowCollection);
//add to the real data holder
$scope.addRandomItem = function addRandomItem() {
$scope.rowCollection.push({
"paramId": "",
"value": "",
"activeYn": "",
"description": "",
"type": "",
"query": "",
"key": ""
});
};
//remove to the real data holder
$scope.removeItem = function removeItem(row) {
var index = $scope.rowCollection.indexOf(row);
if (index !== -1) {
$scope.rowCollection.splice(index, 1);
}
}
vm.save = function(){
console.log("here");
console.log(JSON.stringify(vm.param));
}
}
})();
你应该使用unshift
而不是push
$scope.addRandomItem = function addRandomItem() {
$scope.rowCollection.unshift({
"paramId": "",
"value": "",
"activeYn": "",
"description": "",
"type": "",
"query": "",
"key": ""
});
};
相关文章:
- CKEditor Widget-阻止编辑可编辑元素本身
- 如何在angularJS中编辑时,如果DB中的值为true,则设置复选框,如果值为false,则取消选中复选框
- 高亮显示时编辑文本大小和颜色
- 剑道UI内联编辑:如何在点击其他按钮时隐藏按钮
- 将事件聚焦/模糊在可编辑内容的元素上
- 三星智能电视应用程序;Brightcove示例应用程序远程控制问题
- 编辑HTML表的源数据
- ExtJS网格单元格编辑器,防止焦点松动问题
- 如何在visualstudio中调试web api时编辑javascript文件
- 具有所有样式的文本正在复制到可编辑文本区域
- 可以't使用PHP使用Froala编辑器上传图像URL
- 用Greasemonkey编辑专栏
- 如何在corona sdk中从CK编辑器中检索数据
- 基于数据类型的编辑框的汇总列表
- 如何使用jQuery可编辑插件检查ajax是否成功完成
- 错误:[$compile:nonassign]表达式'未定义'与指令'内容可编辑'是不可
- 如何在Angular js智能表中编辑内容
- 绑定智能表值并编辑行
- 什么免费的javascript编辑器可以做这种智能感知
- VS Code智能感知javascript不工作,如果我正在编辑typescript