Javascript 操纵数组数据以实际保存、写入和更改数据内容

我是AngularJS的新手，到目前为止我很喜欢它，但我很难用它来处理我的数据。我有一个属性名为、描述为、类型为、的数据数组。。。等我有足够的数据，但还不足以上传到服务器上。我的问题是，我希望能够使用表单或输入更改和更新我的数据

这是我的scripts/admin.js，在这里我实现了submit函数，即我用submit按钮调用的表单

 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模型”来绑定数据，这一切都很好，但它实际上并没有改变main.html中的数组内容。当我刷新时，所有内容都会回到数组内容的状态。这是因为我实际上没有过度编写数组内容。如何对数组内容中的实际对象进行绝对更改/重写

---

我觉得它就像$scope.campaiments.pushcampaign一样简单；除了“推送”之外，如果要将值存储在服务器中，它将是“更新”或“重写”

，您应该看到创建入口点以获取、保存和删除数据。或者，您可以使用较低级别的服务

如果要将数据存储在当前脚本中，它将一直持续到在浏览器中刷新页面为止-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.campetings的——因此，如果您导航到另一个ng视图，然后返回，数据仍然在这里

---

但是，如果您想让数据在F5中存活，则必须使用我提供的服务器端选项。或者使用本地存储。

刷新页面时，它会返回吗？嗯，当你不把更新后的值保存在任何地方时，这并不奇怪。@dirkk确切地说，你能告诉我做这件事的工具吗？我目前还在研究。有一个免费的计划，非常适合在没有自己后端的情况下保存数据。@dave我一定会检查它，但我仍然想知道是否可以使用JS和Angular直接更改数组内容。是否要从客户端覆盖javascript文件？不，不太可能。您可能至少可以使用localStorage将其保存到客户端浏览器。谢谢您的回答。是的，我有它目前'推'到阵列，但就像你说的，它不能生存的页面刷新。我目前正在通过heroku进行部署，这将是我第一次将数据上传到heroku数据库。你有没有将我当前的angularjs数据上传到heroku postgres数据库的技巧？是的：你需要一种后端技术。我不知道你在用什么PHP、NodeJS、Python、Java等等。。。。我不知道你有什么预配置的软件包或应用程序，但访问数据库需要密码，这样。。。您需要服务器端，这意味着：在客户端拥有数据库密码为malicius lammers打开了访问您站点的大门。因此：一旦您决定使用哪种服务器端技术，您将自己发现哪种技术适合您的需要。