Question

我是AngularJS的新手，到目前为止，我很喜欢它，但我很难用它来操纵我的数据。我有一系列数据，其属性名称为：＆＃39;＆＃39;，说明：＆＃39;＆＃39;，键入：＆＃39;＆＃39;，...等等...我有足够的数据，但还不足以将其上传到服务器上。我的问题是我希望能够使用表单或输入更改和更新我的数据。

这是我的scripts / 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>

我正在尝试使用＆＃39; ng-model＆＃39;绑定数据，它一切正常，但它实际上并没有改变我的main.html中的数组内容。当我刷新它时，只回到我的数组内容的方式。这是因为我实际上没有覆盖我的数组内容。如何对数组内容中的实际对象进行绝对更改/重写？

我觉得它就像$ scope.campaigns.push（campaign）一样简单;除了推动＆＃39;它会更新＆＃39;或者＆＃39;重写＆＃39;

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中存活，则必须使用我提供给您的服务器端选项。或使用本地存储。

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

1 个答案: