如何使用JS或angular JS在html中添加行后本地存储表
How to local storage the table after adding rows in html using JS or angular Js?
我使用了下面链接中的代码。
http://codepen.io/akashmitra/pen/eNRVKo
HTML
<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-required>
{{ user.Name || 'empty' }}
</span>
</td>
<td>
<!-- editable status (select-local) -->
<span editable-text="user.Company" e-name="Company" e-form="rowform">
{{ user.Company || 'empty' }}
</span>
</td>
<td>
<!-- editable group (select-remote) -->
<span editable-text="user.Type" e-name="Type" e-form="rowform">
{{ user.Type || 'empty' }}
</span>
</td>
<td style="white-space: nowrap">
<!-- form -->
<form editable-form name="rowform" 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>
CSS
div[ng-app] { margin: 10px; }
.table {width: 100% }
form[editable-form] > div {margin: 10px 0;}
JS
var app = angular.module("app", ["xeditable"]);
app.run(function(editableOptions) {
editableOptions.theme = 'bs3';
});
app.controller('Ctrl', function($scope, $filter, $http) {
$scope.users = [{
Name: "Ankit Verma",
Company: "Westeros Inc.",
Type: "Communication Engineer",
Reporting: "7:12pm Oct 28, 2013"
}, {
Name: "Amit Kumar Roy",
Company: "King's Landing Corp",
Type: "Pilot 1",
Reporting: "8:12pm Nov 14, 2013"
}, {
Name: "Akash Mitra",
Company: "Castle Black Ltd",
Type: "Cabin Crew",
Reporting: "9:12am Oct 05, 2013"
},{
Name: "Tony Stark",
Company: "Stark Industries",
Type: "Cabin Crew",
Reporting: "6:30pm Nov 20, 2013"
}];
$scope.showGroup = function(user) {
if(user.group && $scope.groups.length) {
var selected = $filter('filter')($scope.groups, {id: user.group});
return selected.length ? selected[0].text : 'Not set';
} else {
return user.groupName || 'Not set';
}
};
$scope.showStatus = function(user) {
var selected = [];
if(user.status) {
selected = $filter('filter')($scope.statuses, {value: user.status});
}
return selected.length ? selected[0].text : 'Not set';
};
// remove user
$scope.removeUser = function(index) {
$scope.users.splice(index, 1);
};
// add user
$scope.addUser = function() {
$scope.inserted = {
id: $scope.users.length+1,
name: '',
status: null,
group: null
};
$scope.users.push($scope.inserted);
};
});
根据我的意愿,我可以添加、编辑和删除该表。
但刷新页面后,修改后的数据已禁用。
如何存储数据?
真的,如果有人解决这个问题,对我会有帮助的。
添加$localStorage作为控制器的依赖项
localStorage.setItem('users', JSON.stringify($scope.users));
要从localStorage取回数据,请使用:
$scope.users = JSON.parse(localStorage.getItem('users'));
相关文章:
- Ember.js-接口状态应该存储在哪里
- 将脚本缓存到本地存储的basket.js概念仍然是一个好主意吗
- 在EXT窗体面板中填充EXT JS存储
- 画布/JS存储矢量/位图对象
- 使用 JS 存储/计算日期/时间
- EXT JS存储未从getJson调用正确加载数据
- 使用Meteor.js存储JSON对象
- 用成员函数扩展React.js存储数据结构
- js存储文本值及其点击次数
- Angular.js:存储http.get请求中的变量,以便在不同的$scope函数中全局使用
- 使用mongoose和node.js存储查询后的变量数据
- 在Ext JS存储中反序列化json数据时区分模型类型
- 用d3.js存储一个日期和这3天
- 使用JQuery/JS存储<td>单击()
- 使用. getjson获取数据,使用Knockout.JS存储数据
- Ext Js 存储连接筛选器
- 在 js 存储库上 github 中的构建状态是什么意思
- 获取输入,添加到页面,并使用纯JS存储在localStorage中
- 使用node.js存储图像会产生错误
- 将CSS和JS存储在Android应用程序中,该应用程序具有webview,如phonegap