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

Manipulating array data to actually save, write, and change the data content

本文关键字:数据 保存 数组 操作数 操作      更新时间:2023-09-26

我是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中存活,你必须使用我给你的服务器端选项。