操作数组数据以实际保存、写入和更改数据内容
Manipulating array data to actually save, write, and change the data content
我是AngularJS的新手,到目前为止我很喜欢它,但是我很难用它来操纵我的数据。我有一个数据数组,属性名称:",描述:",类型:",…等等……我有足够的数据,但还不足以上传到服务器上。我的问题是,我希望能够改变和更新我的数据使用表单或输入。
这是我的脚本/admin.js,我实现函数submitTheForm(),我与提交按钮调用。
angular.module('myApp')
//filter to get a specific $scope.campaigns using its id
.filter('getById', function() {
return function(input, id) {
var i=0, len=input.length;
// alert(input.length);
for (; i<len; i++) {
if (+input[i].id === +id) {
return input[i];
}
}
return input[0];
};
})
.controller('AdminCtrl', ['$scope', '$filter', function($scope, $filter) {
//<--ARRAY OF DATA with multiple attributes<--
$scope.campaigns = [
{ name:'', description'', etc... etc...},
{...Lots of Data...},
{...Lots of Data...},
{...Lots of Data...},
{...Lots of Data...},
];
$scope.selectCampaign = function(object) {
$scope.selectedCampaign = object;
};
$scope.submitTheForm = function(item, event) {
if (confirm("Are you sure you want to edit?") == true) {
alert("--> Submitting form");
var dataObject = {
name : $scope.selectedCampaign.name, description: $scope.selectedCampaign.description, type: $scope.selectedCampaign.type, imgSrc: $scope.selectedCampaign.imgSrc, brand: $scope.selectedCampaign.brand, region: $scope.selectedCampaign.region, location: $scope.selectedCampaign.location, contact: $scope.selectedCampaign.contact, url: $scope.selectedCampaign.url, id: $scope.selectedCampaign.id
};
console.log(dataObject);
var campaign = $scope.selectedCampaign;
var id = campaign.id;
var found = $filter('getById')($scope.campaigns, id);
// setTimeout(function(){ $scope.$apply($scope.selectedCampaign = dataObject); });
}
};
}]);
这是我的main。html这里有输入和提交按钮
<div class="row modalDetail">
<div class="col-xs-12 col-sm-6 col-md-6 detailLeft text-left">
<div class="middle-allign">
<h1 class="detailName">
<input type="text" ng-model="selectedCampaign.name" name="name">
</h1>
<div class="detailDescription">
<textarea rows="5" cols="71" name="description" ng-model="selectedCampaign.description"></textarea>
</div>
<table class="detailTable table">
<tbody>
<tr>
<td class="bolder">Brand</td>
<td>
<input type="text" ng-model="selectedCampaign.brand" name="brand" >
</td>
</tr>
<tr>
<td class="bolder">Campaign Type</td>
<td>
<input type="text" ng-model="selectedCampaign.type" name="type">
</td>
</tr><tr>
<td class="bolder">Region</td>
<td>
<input type="text" ng-model="selectedCampaign.region" name="region">
</td>
</tr>
<tr>
<td class="bolder">Contact</td>
<td>
<input type="text" ng-model="selectedCampaign.contact" name="contact">
</td>
</tr>
<tr>
<td class="bolder">Location</td>
<td>
<input type="text" ng-model="selectedCampaign.location" name="location">
</td>
</tr>
<tr>
<td class="bolder">URL</td>
<td>
<input type="text" ng-model="selectedCampaign.url" name="url">
</td>
</tr>
</tbody>
</table>
<div class="detailCta">
<button class="btn detailButton" ng-click="submitTheForm()">Submit Campaign</button>
</div>
</div>
</div>
我试图利用'ng-model'来绑定数据,这一切都很好,但它实际上并没有改变我的main.html中的数组内容。当我刷新时,它就会回到数组内容的状态。这是因为我并没有覆盖数组内容。我怎么能去做一个绝对的改变/覆盖到数组内容中的实际对象?
我觉得它就像$scope.campaign .push(campaign);只不过不是'push'而是'update'或' overwrite '
如果你想在服务器端存储这些值,你应该使用ngResource来创建入口点来获取和保存(以及删除)数据。或者,您可以使用较低级别的服务$http.
如果您想将数据存储在当前脚本中(它将持续到页面在浏览器中刷新 - F5),您应该做一些更改:
.controller('AdminCtrl', ['$scope', '$filter', '$rootScope', function($scope, $filter, $rootScope) {
//<--ARRAY OF DATA with multiple attributes<--
if ($rootScope.campaigns === undefined) {
$rootScope.campaigns = [
{ name:'', description'', etc... etc...},
{...Lots of Data...},
{...Lots of Data...},
{...Lots of Data...},
{...Lots of Data...},
];
}
$scope.campaigns = $rootScope.campaigns;
//don't even think this above line is needed, since $scope inherits from $rootScope, but I've put it for clarity.
$scope.selectCampaign = function(object) {
$scope.selectedCampaign = object;
};
$scope.submitTheForm = function(item, event) {
if (confirm("Are you sure you want to edit?") == true) {
alert("--> Submitting form");
var dataObject = {
name : $scope.selectedCampaign.name, description: $scope.selectedCampaign.description, type: $scope.selectedCampaign.type, imgSrc: $scope.selectedCampaign.imgSrc, brand: $scope.selectedCampaign.brand, region: $scope.selectedCampaign.region, location: $scope.selectedCampaign.location, contact: $scope.selectedCampaign.contact, url: $scope.selectedCampaign.url, id: $scope.selectedCampaign.id
};
console.log(dataObject);
var campaign = $scope.selectedCampaign;
var id = campaign.id;
var found = $filter('getById')($scope.campaigns, id);
}
};
}]);
注意我是如何将它绑定到$rootScope的。广告-所以如果你导航到另一个n -view然后再回来,数据仍然在这里。
然而,如果你想让你的数据在F5中存活,你必须使用我给你的服务器端选项。
相关文章:
- 如何使用 Angular JS 将数据保存在数据库中
- 将数据保存到数据库(ajax/php)后,使文本字段变灰/禁用
- 当使用ajax并将html数据保存为对象时,收听浏览器返回按钮.好的或坏的
- 我应该如何将响应数据保存在对象(json)中以获得更好的操作和性能
- 将 JSON 数据保存到服务器上
- 可以'编辑后不会将数据保存在数据库中,但网格显示更改
- Javascript-将谷歌趋势url中的数据保存到PHP数组中
- 如何使用JavaScript将用户生成的数据保存到Firebase中的用户
- 将表数据保存在本地存储中
- 我应该把维基百科的数据保存到我的数据库中吗
- 使用PHP将表格数据保存为CSV格式
- 如何在网站上实现一个按钮,允许用户将生成的数组数据保存为ASCII文件
- imacros JavaScript 将数据保存到文件中,在 Firefox 中给出错误
- 如何将数据保存到本地谷歌表格
- 将表数据保存到 HTML5 LocalStorage
- 如何将 JSON 数据保存到文件
- 将二进制数据保存在浏览器中,而不会在下载时进行 UTF8 编码
- 将输入数据保存到全局变量
- 将数据保存到Syncano Angular应用程序
- 使用角度将结构化数据保存在火库中