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

Question

我是 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.campaigns.push(campaign); 一样简单。除了“推送”而不是“更新”或“覆盖”

Answer 1

如果您想将值存储在服务器中，您应该看到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.campaigns - 所以如果你导航到另一个 ng-view 然后回来，数据仍然在这里。

但是，如果您希望您的数据在 F5 中保留下来，您必须使用我给您的服务器端选项。或使用本地存储。