Javascript 在ng repeat from LocalStorage中编辑对象的属性

我以类似表格的布局列出了保存到Localstorage中的对象数组

每行显示保存在特定对象中的数据。我希望在对象保存到LocalStorage后，能够编辑和更新该对象的某些属性

以下是我的两个对象的外观：

[{
  "date":"2014 10 16",
  "time":"20.22",
  "car":"396",
  "driver":"Seb",
  "from":"A",
  "destination":"B",
  "pax":"3",
  "arrival":"23.10"
},
{
  "date":"2014 10 16",
  "time":"23.22",
  "car":"46",
  "driver":"Eric",
  "from":"C",
  "destination":"E",
  "pax":"3",
  "arrival":"00.10"
}] 

到目前为止，我的前端代码显示的目标属性如下所示：

HTML

<div class="col-md-3" 
     ng-show="editItem == false" 
     ng-hide="editItem">{{record.destination}}</div> 
// Shows current value

<div class="col-md-3" 
     ng-show="editItem == true" 
     ng-hide="!editItem">
   <select class="form-control" 
           ng-model="locationList2" 
           ng-options="location.place for location in locationlist | orderBy:'place'">
     <option value="">Destination</option>
   </select> 
</div>
// Shows select with options to be picked to update property

<div class="col-md-1">
         <button ng-click="editItem = !editItem" 
                 ng-show="!editItem">Edit</button>
         <button ng-click="editData(record); editItem = !editItem" 
                 ng-show="editItem">Ok</button>
</div>
//Toggles between current value and select and triggers editData function

到目前为止，当我触发editData时，它只是删除Destination属性，而不是使用Select中locationList2的模型来更新它

我错过了什么

编辑

以下是完整的ng重复代码：

    <div class="row msf-row" ng-repeat="record in recordlist | filter: search">
      <div class="col-md-1">{{record.time}}</div>
      <div class="col-md-1"><strong>{{record.car}}</strong></div>
      <div class="col-md-1">{{record.driver}}</div>
      <div class="col-md-3">{{record.from}}</div>
      <div class="col-md-3" 
         ng-show="editItem == false" 
         ng-hide="editItem">
           {{record.destination}}              
      </div>

      <div class="col-md-3" 
         ng-show="editItem == true" 
         ng-hide="!editItem">
            <select class="form-control" 
               ng-model="locationList2" 
               ng-options="location.place for location in locationlist | orderBy:'place'">
                  <option value="">Destination</option>
            </select> 
      </div>

      <div class="col-md-1">{{record.pax}}</div>

      <div class="col-md-1">
         <button 
           ng-click="editItem = !editItem" 
           ng-show="!editItem">
              <i class="fa fa-pencil"></i>
         </button>

         <button 
           ng-click="editData(record); editItem = !editItem" 
           ng-show="editItem">
              <i class="fa fa-check"></i>
         </button>
      </div>
    </div>   

{{record.time}
{{record.car}}
{{record.driver}}
{{record.from}}
{{record.destination}
目的地
{{record.pax}

还有，我这里有一个例子来说明这个问题！ 在开始查看应用程序运行和提到的问题之前，添加驾驶员、汽车代码和位置。

您可以将其用作LocalStorage API的抽象

如果您只想破解它，可以在设置数据时沿

localStorage.setItem（'data'，JSON.stringify（data））

做一些事情，并使用

JSON.parse（localStorage.getItem（'data'））

提取它。默认情况下，LocalStorage不处理对象，因此我们必须序列化它

无论您选择哪种解决方案，最好稍微扩展您的编辑：

$scope.editData = function (recordlist) {
    $scope.recordlist.destination = $scope.locationList2;

    // replace whole LocalStorage data here now. no need to "patch" it
    updateLocalStorage('data', <data containing your objects goes here>);
}

HTML:

HTML:

目的地

---

如上所述，JS可以由观察者代替。这里需要注意的重要一点是，我将数据直接绑定到记录。这就避免了在编辑数据时的麻烦，更重要的是摆脱了有问题的ng模型参考。

您的问题不清楚。你能详细说明一下吗？嗨@PSL，我更新了问题：）那么你要做的是在编辑之后更新localStorage条目，对吗？我有一个保存的{{record.destination}属性，我可以单击编辑按钮，然后在视图中显示一个Select来替换{{record.destination}，我希望能够在select中选择一个备选方案，并在触发ng click=“editData（recordlist）；保存它以替换/更新当前{{record.destination}”.Yes@bebraw，这是正确的。但是只有ng重复列表中特定项目的某些属性。我刚刚更新了我的问题。到目前为止，如果我触发editData函数并记录。destination='test'；，它将非常有效，并将属性更新为destination:test；，但当我尝试从Select us捕获数据时如果使用locationList2模型，则不会出现这种情况。

record

和

recordList

之间的关系是什么？您是否有

ng repeat

？您是否可以验证，当您修改记录时，记录列表也会被修改？我猜这可能是问题所在。为了澄清，我包含了整个ng repeat。谢谢感谢您的帮助和耐心！@EricMitjans嘿，您是否尝试过直接修改记录？或者您可以设置代理（

angular.copy

）在编辑期间，然后在保存时进行角度扩展。@EricMitjans这里有一个固定版本。问题是，

ng repeat

的多个项目指向同一个模型。最好直接指向记录。我将在稍后的回答中对此进行扩展。

$scope.editData = function (recordlist) {
    $scope.recordlist.destination = $scope.locationList2;

    // replace whole LocalStorage data here now. no need to "patch" it
    updateLocalStorage('data', <data containing your objects goes here>);
}

$scope.$watch(<data name goes here>, function(newVal) {
    // update your LocalStorage now
});

$scope.editData = function (record) {
    record.destination = $scope.location;
    jsonToRecordLocalStorage($scope.recordlist);
};

<select class="form-control" ng-model="location" ng-options="location.place for location in locationlist | orderBy:'place'">
    <option value="">Destination</option>
</select>

$scope.editData = function () {
  jsonToRecordLocalStorage($scope.recordlist);
};

<select class="form-control" ng-model="record.destination" ng-options="location.place as location.place for location in locationlist | orderBy:'place'">
    <option value="">Destination</option>
</select>